Specificity with CSS is like having ketchup with your hotdog. One does not taste good without the other. Right Dave? When dealing with very complex styling or multiple templating (10-20 page types) your best bet is to utilize element types. Various page by page styling can be achieved by simply adding an id selector into the body element. The body#foo specificity is very high and will overwrite other more generalized descendent selectors. The body#foo #foo has higher specificity than #foo thus overwriting #foo.

The Web site pica.org developed multiple page types and those page types have multiple color schemes. We were able to control the structure by utilizing elements by a simple ID selector in the body tag (id=”inside”). At the same time adding more strength with the addition of two class selectors level1 and blue (class=”level1 blue”). The CSS declaration looks like this: body#inside.level1.blue Now we have what we want. Multiple page types with multiple colors with out changing any of the underline structure.

What about the dependencies of such a method?

Plan out your structure carefully. PICA demanded specific template control and color scheming. We came up with a plan to execute these ideas. In this case the most obvious was to depend on the cascade with descendant selecting.

Don’t go overboard with multiple selectors

Try to avoid writing many multiple selectors with in your document flow. Choose specific key areas to place you selectors. If you are writing a declaration body#foo.level1.blue.template3 #nav ul#on a.current to overwrite a simple link than you’ve may have gone over board. This can simply be avoided by writing li#link a.current.

Specificity can be come very complex.

With the long overdue arrival of attribute and descendent selectors, specificity is going to be more complex than ever. Of course this is due to IE7’s long and overdue arrival. For now, take advantage of specificity and rely on decedent selectors to do the job for you.