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

!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.

Answer 3

Also, !important is ignored in IE6/7. So you can make use of it as an IE6/7 hack.

Answer 4

If your page includes multiple CSS files, the CSS written by you, and additional CSS that go with software written by other parties, you may want some of your CSS marked !important to "guarantee" it will not be overridden by CSS from other included files.

Answer 5

don’t use the !important declaration unless you’ve tried everything else first, and keep in mind any drawbacks. If you do use it, it would probably make sense, if possible, to put a comment in your CSS next to any styles that are being overridden, to ensure better code maintainability.

Answer 6

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.
• Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
• Never use !important when you're writing a plugin/mashup.
• Always look for a way to use specificity before even considering !important

Answer 7

!important is useful when you're working with someone else's code and can't override an effect simply by using more specific selectors. When I'm asked to come in and add on a page or small set of pages to an existing site and I have to include the existing stylesheets, but can't edit them (either because of lack of access or because the trickle-down effect would break other things), that's where !important comes in handy. Otherwise you should be using selector specificity to override behavior.

Answer 8

An example with explanation is here. http://praveenbattula.blogspot.com/2009/04/importance-of-important-property-in-css.html