Squeeze Your CSS Files Into Shape

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 Colours

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

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

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

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

This method or colour shorthand works for all the web-safe colours, 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.

As mentioned before, there are various online tools that allow you to compress your CSS files if you want to shave even more bytes off your CSS.