Waterfalls cascading (it's not a perfect metaphor...)

Understanding the Cascade: Part 3 !important and Putting It All Together

26 Jul'13

This final part of Understanding the Cascade introduces the concept of !important declarations and an overview of how all the aspects of the cascade fit together.

The final part of a three part series on the CSS cascade. You can check out part one of the article (What Affects the Cascade and Types of Style Sheets) here  and part two (Specificity and Order) here if you didn't catch them.

!important or normal

Individual declarations can have !important added to them, as follows:

p {color:red !important;}

Important declarations are removed from the flow of ‘normal’ (non !important) declarations and are immediately put on top of the pile. !important skips the standard specificity, and no matter if the style is inline, or how many IDs, classes or element selectors are used will always win.

Where there are two conflicting !important declarations like below, they are compared on their specificity and then finally order in the style sheet.

!important with types of style sheet

!important styles have a confusing effect on user and author style sheets. While the normal order of priority for types of style sheets is:

  1. Browser
  2. User
  3. Author

With the important declaration, the order is switched as follows:

  1. User !important
  2. Author !important
  3. Browser !important

As you can see here, user style sheet declarations with !important override all author style sheets, full stop.

A warning on usage of !important

It can be tempting for less experienced designers to use !important when they don’t understand why an element isn’t receiving a style they’re trying to add. This can quickly become a problem, as overriding !important declarations requires more specific !important declarations and can make maintenance and handing over code a bit of a nightmare. Hopefully be being aware of how the cascade works you’ll be able to find good uses for !important (like overriding inline styles that you can’t control) and use them sparingly: most projects I work on never have an !important declaration).

Putting it all together

For designers working on websites, we can ignore the user style sheet. Doing so, the following shows you the least specific rules, working up to the most specific rules:

  1. Browser style sheet form the base CSS and are overridden with any author styles.
  2. Author styles:
    1. Order of the rules
    2. Specificity of element selectors
    3. Specificity of class selectors
    4. Specificity of ID selectors
    5. Inline declarations
    6. !important rules (important rules follow the same specificity ordering when there are more than one).

Hopefully that gives you a good insight into how the CSS cascade works that you can use and apply to keep your stylesheets in line (lols) and to avoid frustration when working with complicated style sheets.


Thanks for stopping by.

Twitter
@tweetbollig
Subscribe via RSS
subscribe
Email
Skype call or chat
chat
Go to top