When to use "!important" to save the day (when working with CSS)

Consider this:

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

How do you make awesome paragraphs always turn red, even ones inside #someElement? Without !important, the first rule will have more specificity and will win over the second rule.


Only as a last resort! This is because once used it is hard to override it. My rules of thumb:

  • Never use !important on site-wide css, or when writing a plugin/mashup.
  • Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
  • Always look for a way to use specificity before even considering !important.

Tags:

Css