It is a good idea to optimize your CSS files. As I told you before, there are a couple ways to improve your CSS coding. I have found an article studying the benefits and performance of CSS compressors.

What’s a CSS compressor?

A CSS compressor optimizes your CSS files. It deletes the unnecessary spaces, enters and improves your coding. For example, if you typed a class like this:

Before:

1
2
3
4
5
6
7
8
9
10
11

p   .example{
margin-top:10px;
margin-bottom:0px;
padding-left:16px;
padding-right:16px;
}

Your CSS compressor will optimize the little CSS ‘errors’ you have made along the way.

After:

1
2
3
4
5
6
7

p.example{
margin:10px 0 0 0;
padding:0 16px;
}

(I didn’t delete the tabs and enters here to keep things understandable.)

Does it work?

It sure does. With CSS compressors you could optimize your CSS file thát much, that the file size reduces with 50%! That can save your dialup user a couple seconds loading time. Another benefit of this method is that you save yourself bandwidth; you save that 50% of all the bandwidth usually going to your CSS file!

What CSS compressor to use?

According to the study ProBlogging made, Icey’s CSS compressor is the best available on the web today. Clean CSS came second in the race. But there are lots more of them around and here are a couple of them:

- Icey’s CSS Compressor
- FlumpCakes CSS Optimizer
- CSS Tidy online
- Clean CSS
- CSS Optimiser
- CSS Drive
- CSS Compressor from PHPinsider.com

Are there anymore advantages?

Yes sir. As a CSS designer, you’ll learn almost every time you start writing a CSS document. You could learn from your CSS compressor as well, because they improve your CSS file and you can learn from that improvement by taking a good look at what is changed.

Ok. Are there any disadvantages?

Yes I think there is one. What about an organized CSS file? Your CSS file gets messed up because all the spaces and enters get deleted and as a result your CSS looks like a mess. The organization is lost and editing and de-bugging is a complete disaster.

What can we do? You should always keep 2 versions of your CSS file. Before you send your CSS file through a CSS compressor, you should always make a backup. This backup is there to provide you the CSS you wrote yourself and these lines will most likely be easier to edit. If you forget that part, you have to look through all the messed CSS. This will take a lot of time.

Conclusion

A CSS compressor is a good tool to optimize the loading time of your website and improve your CSS coding skills. But you should not forget to make a backup of your original file. Every time you have to edit a couple lines, you have to make a backup. If you haven’t got a problem with that, I suggest you try some of them yourself!

There are advantages enough!