CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!Simplifying the Cascade
To keep the cascade order as simple as possible, I minimize the number of style sheets that I attach and I
do not use @import statements. I also avoid the !important operator. Most importantly, I sort my
selectors so they are listed in cascade order in each style sheet.
I organize the style sheet into six groups. I put all universal selectors first, followed by element, class,
attribute, pseudo, and ID selectors. If I have any !important selectors, I place them after the ID selectors
in another set of groups.
Keeping style sheets sorted in cascade order helps me remember that the ID selectors override all
class, attribute, pseudo, element, and universal selectors—no matter where they occur in the current
style sheet and in all other style sheets. Likewise, it reminds me that class, attribute, and pseudo
selectors in each style sheet override all element and universal selectors—no matter where they occur.
Keeping rules sorted in cascading order makes it easy to see the order in which competing rules are
applied. This makes it easy to track down which rules are overriding other rules. I keep rules sorted in
the cascading order as follows:
/ Universal Selectors /
/ Element Selectors /
/ Class, Attribute, and Pseudo Selectors /
/ ID Selectors /
/ !important Universal Selectors /
/ !important Element Selectors /
/ !important Class, Attribute, and Pseudo Selectors /
/ !important ID Selectors /