How to write compressed CSS code - Optimize CSS

CSS is not really hard to learn. While it may be giving you some headaches at the very start, it is a matter of time until you will learn it completely. One of the steps to master CSS is writing your very own compressed CSS code.

Why should you compress the CSS code?

1. Faster page loading
2. Reduced size
3. Easier for editing and updating
4. Less is more - You can achieve the same or even better results by writing a compressed code

Now let’s proceed with examples

Understanding and basic CSS compressing

Let’s say we have a div with a class “myDiv” upon which we want to apply some css styles.

Uncompressed code

.myDiv {
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
background:#ffffff;
background-position:top;
background-attachment:fixed;
background-image:url(path-to-image.jpg);
background-repeat:repeat-x;
}

Now this is a very uncompressed code. We use basically more than 10 lines of code, which we can substitute with just 3 lines. Check this out:

.myDiv {
padding:15px;
margin:15px;
background:#fff top fixed repeat-x url(path-to-image.jpg);
}

Now this is really compressed. But what if we had different values for the paddings and the margins of the element?

We can use this type of code

.myDiv {
padding:15px 20px 15px 25px;
margin:15px 20px 15px 25px;
background:#fff top fixed repeat-x url(path-to-image.jpg);
}

While it might be confusing, let me explain it.

padding:15px 20px 15px 25px; actually means 15px padding on the top, 20px on the right, 15px on the bottom and 25px padding on the left.

The values are passed as padding: top right bottom left;

The first parameter is the top value for the padding, the second for the right padding, the third for the bottom and the fourth for the left padding. I hope it’s clear for you now.

But what if you had same values for the top and bottom and other same values for the left and right?

You can code that like padding:20px 10px;. The first value is added for the bottom and top, while the second value of 10px is added to the left and right.

It is also interesting to know that so many parameters for the background property can basically be one lined. As presented in the first example:

.myDiv {
background:#ffffff;
background-position:top;
background-attachment:fixed;
background-image:url(path-to-image.jpg);
background-repeat:repeat-x;
}

It can be compressed to

.myDiv {
background:#fff top fixed repeat-x url(path-to-image.jpg);
}

It will make no difference on how you order the parameters for the background property. The above mentioned example will produce the very much same results as

.myDiv {
background:top repeat-x #fff url(path-to-image.jpg) fixed;
}

Further compressing and optimization

Let’s say we have two divs with classes (myDiv and yourDiv). Part of the CSS parameters they have are the same, but they also have a couple of different values for specific CSS parameters.

Example

.myDiv {
padding:15px;
margin:15px;
background:top fixed url(path-to-image) repeat;
width:300px;
height:180px;
}

.yourDiv {
padding:15px;
margin:15px;
background:top fixed url(path-to-image) repeat;
width:450px;
height:150px;
}

These two divs have the same values for padding, margin and background, but not for width and height. We can compress this in the following way:

.myDiv , .yourDiv {
padding:15px;
margin:15px;
background:top fixed url(path-to-image) repeat;
}

.myDiv {
width:300px;
height:180px;
}

.yourDiv {
width:450px;
height:150px;
}

I hope you get the idea now. Allthough i have seen php scripts for CSS compressing, it will be the best option if you can write compressed CSS code on your own. Its simple and easy.