Keeping CSS file sizes lean for practicality and sport
One of the benefits touted by separating style from structure is smaller html file sizes. But with many sites, the accompanying CSS file(s) can offset the savings in size, with CSS declarations that can quickly add up. Doug Bowman's site, for example, has 50 KBs worth of CSS. Since CSS is cached, and therefore only downloaded once, and since a growing number of people are on broadband connections, some developers might not see this as a problem.
But there are still some dial-up users out there who still do value the time of initial page load. There are still server admins who care about bandwidth. And fortunately, there are still some web developers out there who not only still care about those dial-up users and server bandwidth, but also take great pride in keeping their CSS files as slim as possible. If you think that only comes by sacrificing readability and structure to the CSS, you may be surprised. Here are some tips in doing so.
1. Use shorthand properties
I thought I'd start by stating the obvious, and say that you should use CSS shorthand properties. (Is anyone learning CSS without learning these, too?) I won't go into all of the shorthand properties here (if you need to know all of them, use this handy page.
Basically, instead of declaring things this way:
#menu {
margin-top:20px;
margin-right:5px;
margin-bottom:10px;
margin-left:12px;Do it like this instead:
#menu {margin:20px 5px 10px 12px;}I'll get another obvious one out of the way with my next suggestion.
2. Cut Colors in Half
Hexidecimal color codes can be shortened in many cases. #ff6600 can just be #f60. This only works when the values are given in pairs, but it's still helpful. White and Black are both common declarations, so instead of #ffffff and #000000, use #fff and #000 respectively. This may not save much, but every little bit helps.
3. Plan ahead
Backpack enthusiasts care about every ounce they carry when hiking. The weights of the tent, flashlight, even silverware, was an important factor when purchasing and packing. Similarly, one can plan ahead when creating a site, and can shave off some bytes in the process.
When planning what CSS is used, make sure to research to find out how many different layouts your page can have. Are there some pages with three columns and some pages with only two, but the column with the main content will be the same in each? Then use classes and IDs wisely.
For example, take the following xhtml for a page with two columns:
<div class="layout2col">
<p>Dogs smell.</p>
</div>... and on another page with three columns:
<div class="layout3col">
<p>More about smelly dogs.</p>
</div>The CSS for that site might look like this:
.layout2col {width:400px;}
.layout2col p {
font: normal 1em/1.2em Verdana;
color:#333;
}
.layout3col {width:250px;}
.layout3col p {
font: normal 1em/1.2em Verdana;
color:#333;
}It's ok, but a bit repetitive. If the xhtml could instead look something like this:
<div id="content" class="layout3col">
<p>More about smelly dogs.</p>
</div>The following, more concise, CSS could be used and achieve the same results as above:
#content p {
font: normal 1em/1.2em Verdana;
color:#333;
}
.layout2col {width:400px;}
.layout3col {width:250px;}4. Ids, Classes, and File names
If a naming convention is used for ids, classes, and images, it can mean a big difference in the CSS file size.
For instance, instead of have a ul with an id of #primarynavigation and another ul with an id of #secondarynavigation, use #nav1 and #nav2 instead. Instead of #header and #footer, maybe use #head and #foot. Instead of a class of .content, maybe use a class of .main.
Image names are another place you can apply this technique. Instead of naming the background image to an h1 "background_h1.gif", consider a name like "bg_h1.gif".
5. Change Directories
File names aren't the only place to trim some letters. Consider the directory where images are stored. The image directory has to be referenced with every mention of a background or list-style image. Many people call that directory "images", but what if it was named "img", or just "i"?
#logo {background: #fff url(../i/logo.gif)}Not only would you save a few letters over the course of a CSS document, but it could be enough to keep many lines from wrapping, and therefore adding to the readability of a CSS file.
6. Consider ditching alternative fonts
I was always told to offer alternative fonts, such as the following:
p {font:normal 1em/1.2em Verdana,Arial,sans-serif;}...which says that paragraphs should be of font-family Verdana, and if Verdana isn't available on the user's system, use Arial, and if Arial isn't available, use whatever the default sans-serif font would be.
But I think some fonts, such as Verdana and Georgia, are on everybody's system, so why bother offering a back-up? You could save a few bytes by ditching those alternatives:
p {font: normal 1em/1.2em Verdana;}I usually only do this for Verdana, Arial, and Georgia. If a less boring font was to be used, it would still be good to list alternatives.
7. Work in one CSS file, but publish another
One easy way to trim file size is to take out comments and white space for the final version of the CSS file. Comments, white space, and putting one declariation per line are all great ways for developers to organize and write their CSS. But once you're ready to publish that file, make a copy of it and strip all the comments and white space from the copy. Upload that new slim file to your server. After all, browsers don't care about your CSS comments and white space. If you ever need to troubleshoot, rewrite, or add to your CSS, you can do so in your 'working copy'. Then make another slimmed down copy to republish. CSS Tweak is a great service for stripping white space and comments.
Knowing that one will later publish a slimmed down CSS file can be quite freeing to a developer, and may result in that developer using more thorough comments than one would otherwise. And comments help everyone, even the person who originally wrote them.
I'd love to hear of any other techniques people find helpful.
