In the spirit of the optimization wave this post is about CSS optimization. There are some simple rules that you can apply. I’m pretty sure most of us have already been familiar with that list, but you never know.

1. Minify

As the JavaScript the CSS also can be minified. This only strips every character that makes the traffic bigger. As you know a well constructed and pretty looking CSS file consists of many new lines, tabs and spaces. Almost every software minifies the CSS by simply removing them. Some of the programs go even further with replacements of different parts of the code considered to be not efficient.

2. Use effective selectors

Some CSS selectors aren’t really efficient. Imagine something like: body div a just to describe only one specific link. That’s really bad. Better practice is to replace that line with something like a.my-class and to replace the a tag into the DOM with that class name. That will be far more effective. Actually if you’re wondering how to find such bad selectors, there’s a tool by Google called Page Speed that’s a Firebug’s plugin and can extract a list of all bad selectors.

3. Inheritance

CSS is really powerful when dealing with inheritance. That’s something that is not some clear but however really powerful. This technique is in the basics of the next rule.

4. Sprites

I’ve written already about CSS sprites. This is nothing new, but be careful when making a new site’s layout. CSS sprites spend you HTTP request and that’s rule number one according to Steve Souders’ list of optimization.

5. Separate logic

Sometimes developers put the site logic in only one file that become to large. Be aware of that. This is hard to maintain and you load things that you don’t need.

That’s a really short list of what you can do with CSS to speed the site up. I hope that can help someone when dealing with cascading style sheets.