How do I reduce the size of my CSS file? Can you teach me some “shorthand” tricks?

Posted December 21, 2004

In the quest to have the best possible CSS site without going psycho like some of the CSS purists out there, I started to take another look at my CSS sheet.

Having written this over three months ago already, I have learned a great deal during that time about how to reduce some of the CSS rule declarations. I also have doubled my site from the original idea, so the sheet is getting a little unruly at 20k. But for now, I think that I will try to reduce where I can, but am not going to spend many hours for just a couple of “k”. Remember, when your users visit your site and load the homepage, the style sheet will go in their cache and won’t need to be loaded again while they are at your site.

So, the first thing I did that had nothing to do with “shorthanding” declarations, I removed the “px” from the end of any of my measurements with a “0″.

The reason for this being that “0″ is the same value, no matter what measurement you give it. 0px is the same as 0pt and that is the same as 0in.

Now, on to shorthands declarations.

What is the definition of shorthand? To shorthand in CSS is to basically combine a similar set of CSS declarations into one. The main two that I am going to be dealing with here and use on a day to day basis with CSS are the background and font declarations.

Here are some of the possible declarations and value pairs that you can have in CSS;

background-color:#444444;

background-image:url(../images/example.gif);

background-position:0 50%;

background-repeat:no-repeat;

background-attachment:fixed;
I hope that most of these declarations are familiar, but if they aren’t, you can always look to the W3C Schools for more information. I am just going to go over the last three that are a little less explanatory.

background-position - is where the background image is placed. You can either input measurements the first one being for “vertical” and the second being for the “horizontal” with the upper left corner of the browser being the axis, coordinates of 0,0. So I can either put an exact measurement for a position from the top, a percentage, or even some of the other values such as top, center, bottom, left, right.

background-repeat - is to specific how your background repeats. The possible values can be no-repeat, repeat, repeat-y, or repeat-x.
So for this example, we don’t want the background to repeat at all with the “no-repeat” value. But we can have the background repeat on the horizontal axis with a “repeat-x” or on the vertical axis with a “repeat-y”.

background-attachment - is to specify whether a background is fixed or scrolls with the rest of the page. This only has two values, scroll or fixed. I use this in my website because I never know how long my pages will get, but I can make my background image as high as I think the maximum viewing height of any browser will be. In my case I made my background image 1300 pixels high, which may be overkill in size, but I like the look and am willing to go over that little bit for aesthetics.

Back to the original idea.

So for shorthand, you can write all of these properties in one declaration called background. Here is how they would look re-written;

background:url(../images/example.gif) #444444 0 50% no-repeat fixed;

“What is the rhyme and reason to this?” you ask. Well, for the background declaration, you can list the values in any order you want. Also, I think the bare minimum to use this property is just one value, any value, just pick one. It is a flexible declaration and that can save you up to five lines of code when you are using background properties. But the “font” shorthand is not as easy going, but just as efficient.

Here are some of the declarations for the font family;

font-size:12px;

font-weight:bold;

font-family: Arial, Helvetica, sans-serif;

font-style:italic;

font-variant:normal;
I use the first three declarations here over an over on a daily basis. I will admit though that I have never used the “font-variant” declaration, which is basically to set the font in a “small-caps” size or “normal” sized font. There is also a way to incorporate the “line-height” declaration, but again, reference W3C schools for more information on that as it is beyond the scope of this article.

When using the shorthand for font here is what you need to know. In order to use the shorthand you must have at least the font-family and font-size declarations in place, and the size always comes first. So the bare minimum will look like this;

font: 12px Arial, Helvetica, sans-serif;

Now, you can put the other values in. I have found that there is a order to things, and that browsers react better when you put the other values first in order. So our final shorthand would look something like this;

font: normal italic bold 12px Arial, Helvetica, sans-serif;

The success!

By taking out all of my “px” on all the measurements of 0 and shorthanding all of my font and background declarations I was able to cut out 1k of code from my stylesheet. That is good enough for me!

I hope this article was helpful, and didn’t glaze over too much when it comes to CSS. It does assume some knowledge base, but I assume if you are reading this you do have at least that. Send me any questions at my hotmail address, jrothe@rothecreations.com.