Reducing file size without compromising functionality is important for forward-thinking web developers. Many modern CSS-driven websites use huge external CSS files of anything up to about 20-25kb.

By using CSS shorthand the overall file size can be reduced, increasing the speed of page loads and decreasing bandwidth usage. Another method is to use a compression utility to remove white-space, similar to JavaScript compression. A good compression utility is available at CleanCSS which has a variety of options to choose. CleanCSS can arrange your code to reduce character usage, thus decreasing the file size. As with any type of compression it is advisable to keep a backup copy of your stylesheet just in case you aren’t happy with the results.

I have often made simple mistakes that add unnecessary characters to my style sheets. Below are some shorthand ways to reduce the size of your CSS files. It is worth keeping a backup version of your original style sheet just in-case you want to roll back at some point.

Combine Properties:

If you define your padding as follows:

padding-top:5px;
padding-bottom:10px;
padding-left:7px;
padding-right:0px;

You can simplify this into one line:

padding:5px 0 10px 7px;

The rule to remember here is TRouBLe. Define your styles in this order: Top, Right, Bottom, Left. Also notice the right padding is 0, therefore adding ‘px’ or ‘em’ is unnecessary.

When you have matching top and bottom or left and right padding. As follows:

padding-top:12px;
padding-bottom:12px;
padding-right:0px;
padding-left:6px;

This can be shortened to:

padding:12px 0 6px

If you have the following situation, you can shorten it as well:

padding-top:10px;
padding-right:20px;
padding-left:20px;
padding-bottom:10px;

This can be shortened to:

padding:10px 20px;

The above shortening method works for padding and margin.

Shorthand Colors

If you define your colors using the standard 6 digit code, you can shorten certain colors to 3 digits:

Black #000000 becomes #000
White #ffffff becomes #fff

This shorthand also works for more complex color codes, as long as the 6-digits are made up of triplets that are doubled (web-safe colors as seen here):

Green #99ff33 becomes #9f3
Orange #ffcc00 becomes #fc0
Red #ff3300 becomes #f30

This method or color shorthand works for all the web-safe colors, and reduces file size.

Combine Elements

If you have an example similar to the following code, you can further reduce file size by combining elements with the same properties into the same string.

p {
border:0;
padding:0;
margin:0;
font-size:1.2em;
color:#000;
}
.main-text {
border:0;
padding:0;
margin:0;
font-size:1.2em;
color:#360;
}
.required {
border:0;
padding:0;
margin:0;
font-size:1em;
color:#ccc;
}

From the above code, some of the elements share the same properties. We can combine these shared elements to save repeating unnecessary code - and thus saving ourselves some more bytes.

p,.main-text,.required {
border:0;
padding:0;
margin:0;
}
p, .main-text {
font-size:1.2em;
}
p {
color:#000;
}
.main-text {
color:#360;
}
.required {
font-size:1em;
color:#ccc;
}

These are just a few ways to reduce the size of your style sheets.