CSS: Using every declaration just once

While surfing for best practices on Internet, I found this article on Google code site. It was an interesting article which was mostly directed towards web developer, but since j2ee deveoper also do some sort of web deveopment, I thought it will be a good idea to share with you guys.

Author: Jens Meiert, Google Webmaster

Recommended experience: Working knowledge of CSS

Original Site: http://code.google.com/speed/articles/optimizing-css.html

A logical way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.

Using every declaration just once means making strict use of selector grouping.

For example, you can combine these rules:

h1 { color: black; }

p { color: black; }

into a single rule:

h1, p { color: black; }

While this simple example appears almost obvious, things get more interesting and harder to quantify when talking about complex style sheets. In our experience, using every declaration just once can reduce the CSS file size by 20-40% on average.

Let's have a look at another example:

h1, h2, h3 { font-weight: normal; }

a strong { font-weight: normal !important; }

strong { font-style: italic; font-weight: normal; }

#nav { font-style: italic; }

.note { font-style: italic; }

Applying the "any declaration just once" rule here results in:

h1, h2, h3, strong { font-weight: normal; }

a strong { font-weight: normal !important; }

strong, #nav, .note { font-style: italic; }

Note that the !important declaration makes a difference here. There are some things to keep in mind when applying this method:

First, overly long selectors can render this method useless. Repeating selectors like html body table tbody tr td p span.example in order to have unique declarations doesn't save much file size. In fact, since "using every declaration just once" might mean a higher number of selectors, this could even result in a bigger style sheet. Using more compact selectors would help, and would enhance the readability of your stylesheet.

Second, be aware of CSS regulations. When a user agent can't parse the selector, it must ignore the declaration block as well. If you run into trouble with this, just bend the "declaration just once" rule - and use it more than once.

Third, and most importantly, keep the cascade in mind. No matter if you're sorting your style sheets in a certain way or are very relaxed about the order in which rules appear in your style sheets, using every declaration once will make you change the order of the rules in one way or another. This order, however, can be decisive for a browser to decide which rule to apply. The easiest solution if you're running into any issues with this is to make an exception as well and use the declaration in question more than once.

Alas, this is not always trivial to implement-this may change the cascading order and require a different workflow.

Workflow

"Using every declaration just once" requires more attention when maintaining stylesheets. You will benefit from finding a way to track changed and added declarations to get them in line again. This is not hard when using a more or less reasonable editor (showing line changes, for example), but needs to be incorporated into the workflow.

One way, for instance, is to mark rules you edited or added by indenting them. Once you're done updating your stylesheet, you can check for the indented rules to see if there are any new duplicate declarations, which you could then move to make sure each one of them is only used once.