Writing efficient CSS with a good performance level is a key aspect for boosting up the overall performance of your web site. Efficient CSS is easy to parse and fast to download by web browsers. In this post I'm going to show you some basic rules to accomplish this task. Bear in mind, however, that these rules should be adapted to your own needs and not taken as mandatory laws.
Minimize cascade
Google experts have found out that a too complex cascading model increases the time required to display the final layout of your pages. Many levels of cascade can actually slow down the final rendering. First rule: keep cascade as simple as possible. For example, avoid this:
#foo #bar #baz {}
Use this instead:
#baz {}
Instead of having three levels of cascade, we actually reduced everything to a single level. This reduces the number of lookups that a browser must execute to find the matching element.
Do not use @import
The at-rule @import should not be used, because it forces a browser to run an additional HTTP GET request. A key aspect in performance tuning is to reduce the number of HTTP requests to the minimum possible.
Use shorthand properties
Shorthand properties should be used whenever it's possible instead of single properties. So avoid this:
#box {
padding-top: 1em;
padding-bottom: 1em;
}
Use this instead:
#box {padding: 1em 0;}
Write single declarations on the same line
Avoiding unnecessary white space is vital, because a significant part of a browser's parsing routine is devoted to separate relevant white space from unnecessary white space. So if you have a rule made up of a single declaration, avoid this:
#foo {
background: #ccc;
}
Use this instead:
#foo{background: #ccc;}
Minimize and compress your CSS
On a production web site, you should always minimize and compress your CSS files, either with a server-side solution or with a client-side one, such as YUI Compressor.