Temporary CSS Specificity Problems

When having to create cross-browser compatible Web sites with little time at hand, adhering to immaculate markup and proper CSS specificity guidelines can be rather irritating.

For prototyping your stylesheets and getting your layout in order, I find that using CSS’s Important rules a necessary workaround so as not to spend an inefficient amount of time debugging my code. Please note that this is only a fix to meet soon-approaching deadlines. After the fact, I recommend that a developer or designer retool, clean and organize his or her CSS declaratives.

CSS specficity is a quite a tricky issue for those who are unaware of such guidelines, especially for developers who tend to focus on more procedural coding. There are various analogies on the Web that make learning specificity fun and easy, but if it is still beyond your grasp by the time a front-end look-and-feel is due, feel free to add some !important declarations to your style values.

The Important rules in CSS are beyond specificity. They do not imply more specificity than other selectors, but they rather enter a selector into another realm altogether.

To use the !important rules, just tag them onto a declared property value.

.main .menu a { color:#fff !important; }

This will override any declaration with matching or greater specificity that appears in your stylesheet, such as:

#content .menu a { color:#00f; }

If we were to give each selector a number value for specificity, the former would appear to have a value of 21 and the latter 111. However, because the former receives an !important declaration on its color property, this selector takes precedence when the documented is displayed on-screen.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.