Progressively overriding and specificity centered CSS/XHTML layouts without !important
Without a proper understanding of CSS selector specificity, the basic approach to managing the override of one CSS is to have a single selector/declaration pair for every element, and then employ the !important switch/declaration to override pre-existing declarations.
The above approach works, but is severely limited in the flexibility, versatility and the interchangeable presentation format intended of CSS/XHTML. The use of !important declarations divides declarations into only two groups: Those that are !important, and the rest of them. Without regard to specificity, and if one focuses too much on the use of !important to override other declarations, the problem of two or more !important declarations comes into play. In the practical sense, the more specific of the two or more !important declarations will win and override the rest, but if the CSS author is not aware of which and how many !important declarations exist, this can lead to very lengthy debugging sessions. NB: The last statement calls for proper organisation and a planned approach to XHTML markup and CSS authoring to properly manage and locate CSS declarations.
Neither, but !important is harder to find/track and control. Since inline CSS is and will always be found next or on the same page as the markup that it is attempting to control, it is relatively easier to control.
Based on my experience and opinion, !important CSS declarations should only be used in troubleshooting situations where the author would like to test a layout, or override CSS declarations in an emergency without having to access and hard-code inline CSS. This is especially important and useful in dynamic web content generations situations such as CMS where the presentation team may/should not constantly access and edit markup. Inn addition, if @include CSS files are used, all !important declarations can be grouped in an emergency/patches/troubleshooting/temporaty CSS include file where they can be located and adjusted or eliminated as necessary.
In the absence of !important declarations, specificity is a powerful tool and approach to creating multiple and progressively overriding declarations if the XHTML markup used is well thought-out and hierarchical. Also, the proper use of IDs and CLASSES to define the mark-up makes it possible to target and style any section or individual element of an XHTML document. I would recommend using an onion ring approach to marking-up content and marking it with IDs and CLASSES so that CSS selectors of varying specificity can be employed.
An ideal application for this markup and styling approach; that is not well exploited at the moment is the ability to enable skinning of content to enable different layout and presentation schemes to be applied to content. Having several regimes of CSS declarations of different specificity in place enables one to use client--side or server-side scripting to switch themes on the fly. This can be used for accessibility (large text, or narrow hand-held screen users being able to change layouts), or it cab be part of a theming approach such as the Mclayout.
