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

Question

#div p {
    color: red !important;
}
...
#div p {
    color: blue;
}

I understand how !important works, in this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it. Does anybody know any example where !important saves the day?

Answer 1

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.

Answer 2

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.

Answer 3

!important saves the day in cases where you dont control HTML output and it renders a style='' attribute. Think ASP.NET and other frameworks.

The only way you can then change this styling is by either using javascript or marking your CSS rule as more !important.