Nov11
The problem with using multiple CSS files for layout.
- posted by: Bruce
- 3 comments
- post a comment
Earlier today I was reading an A List Apart article titled Progressive Enhancements with CSS. The main idea behind it being that breaking out styles into a multitude of files is beneficial. For example, creating a typography.css for type styles, a layout.css for positioning styles, and a colors.css for colors and graphics. At face value this sounds great because abstraction, for the most part, works well on computers (utilizing folder hierarchy’s, categorizing types of media, tagging web articles, etc).
Fine and dandy. But there seems to be a real world problem.
There are three big reasons I see not to break out CSS into multiple files.
First, when you break out CSS into multiple files you are forced, no matter what to write a lot of duplicate code. For instance, if I want to have a certain container have a typeface, background, and color in a single main.css file I can do the following piece of code:
#element {
position: relative;
float: left;
width: 20em;
color: #f0f;
background: url(/images/background.gif) repeat-x 0 0;
font: 120% Arial, Helvetica, Verdana, Sans-serif;
}However, if I break this out into: typography.css, layout.css, and colors.css files I have to do the following:
/* typography.css */
#element {
font: 120% Arial, Helvetica, Verdana, Sans-serif;
}
/* layout.css */
#element {
position: relative;
float: left;
width: 20em;
}
/* color.css */
#element {
color: #f0f;
background: url(/images/background.gif) repeat-x 0 0;
}Okay, pretty easy to see that the amount of code being used favors having one central CSS file. Now, let’s talk about style management and the second argument I have for not using multiple CSS files.
A single CSS file for a website can grow to be quite a large file. Most I’ve written fall in the range of 1200 to 2000 lines. The problem with this is that making small changes can be a bit of a hassle. However, I would argue that the single best way around a complicated CSS file is to clearly comment code, use shorthand css, and make sure there is good style structure. I.E. Don’t go styling something in two different parts of the file and don’t write five lines of CSS when one will do.
But, in no way is the answer to break the CSS into multiple files. Why? Because the worst possible thing you can have to do is deal with the above problem three different times. Granted, if you only have to make a small color change than you only have to edit one file. But, if you use only one file to begin with then you only have to edit one file anyway.
Last, there’s a reason a site like digg loads in one 2500 line CSS file. The answer is that the less page requests the better. Doing multiple page requests to get different styles that are separated is inefficient. If a site gets a lot of traffic or a large traffic spike the less page requests the better. Granted, this may not be common but when it happens there’s nothing more important than trying to keep the site up.
Want more assurance?
Neither Dan Chederholm simplebits.com, Veerle Pieters veerle.duoh.com, or Jeff Zeldman zeldman.com use broken out CSS for type and color.
It has to say something when the big wigs in the bizz don’t follow the advice of A List Apart eh?
Exceptions?
As always, there are a few exceptions to this. For instance, if the website is like MTV.com and has a constantly changing color scheme then it could be useful to break out individual styles into a separate CSS file. One that overwrites the default styles of the base design and can be updated without disrupting the primary styling of the site. Also, microsites that have completely different layouts from their parent sites almost always deserve a new CSS file.
Conclusion
Basically there’s no need to break out your styles into a multitude of files. While the idea of abstraction might sound good the benefits just don’t add up. All you really end up with is a waste of time and resources.
Leave a comment