Minimising and creating efficient CSS code

By Lee Sykes

March 2006

This article is intended for people who are familiar and comfortable with CSS.

We are going to look at some of the techniques that are available within CSS to minimise the size of our CSS stylesheets and to write more efficient code.

Why?

Reduce your file size:

Granted this is usually by a small amount, but every byte counts, especially for users with a low speed internet connection. It also benefits busy high bandwidth sites by reducing the amount of bandwidth used per page.

Speed of coding:

Speed up the time of entering your CSS code by reducing four lines of code to one line.

Easier to read and edit:

Once you are familiar with the shorthand formatting you will find your documents are much easier to read and quick to edit.

Shorthand Examples:

Here are some of the common shorthand formats:

font:  [style] [variant] [weight] size/[line-height] family

The values in square brackets are optional. The first three values can be specified in any order.

Eg:
Becomes:
Font shorthand W3C specifications

---

background: (Can specify any of the background elements in any order, separated by spaces)

Eg:
Becomes:
Background W3C specifications

---

margin:

(top, right, bottom, left) (See the clock tip below) or
(top and bottom, left and right) or
(top, left and right, bottom) or
(one value for all four sides)

Eg:
Becomes:
Eg:  
Becomes:
Eg: 
Becomes:
Eg:   
Becomes:
Margin W3C specifications

---

padding:

(top, right, bottom, left) (See the clock tip below) or
(top and bottom, left and right) or
(top, left and right, bottom) or
(one value for all four sides)

Padding works in the same way as the margin examples above.

Padding W3C specifications

---

border:

The three elements below work in exactly the same way as the padding and margin shorthand methods:

border-width W3C specifications
border-color W3C specifications
border-style W3C specifications

The values in square brackets are optional and can be specified in any order.

Eg:
Becomes:
If for instance you wish to use the same style and color but specify a different width for each side you can use:

Note: Within the CSS values, each value should be separated by a space and each value should have a unit of measurement assigned to it, eg: px, em, %, etc.

Notice that the value 0 does not have a unit of measurement. The reason for this is that no matter which type of measurement you use, eg: px, em, % etc. a zero unit is a zero amount in any unit.

Within the W3C specifications it is optional to include the measurement for a unit of zero, we have chosen to remove px from the zero.

Border W3C specifications

---

The Clock

A tip for remembering the order of the box sides for the margin, padding, and borders properties is to imagine a clock face.

Multiple Declarations of CSS values

It’s possible to declare the same CSS values for several classes at the same time, simply separate each class with a comma.

Eg.
Here we have specified the same font for classes one, two, three and then specified a different color for each class separately.

Colours Shorthand:

If you use Hex values for specifying your colours within your website, eg: #ffffff you can also use shorthand values.

If the Hex value consists of three pairs, eg: #ff00ff, you can shorten this to a single character for each pair, eg: #f0f

Here are some further examples:

Conclusion:

We have covered a number of ways in which you can minimise and create efficient CSS code. These techniques will help you to reduce your file sizes while also making it easy for you to read and edit your code.