When to use the !important property in CSS
css, html
Solution
This is the real life scenario
Imagine this scenario
- You have a global CSS file that sets visual aspects of your site globally.
- You (or others) use inline styles on elements themselves which is usually very bad practice.
In this case you could set certain styles in your global CSS file as important, thus overriding inline styles set directly on elements.
Actual real world example?
This kind of scenario usually happens when you don't have total control over your HTML. Think of solutions in SharePoint for instance. You'd like your part to be globally defined (styled), but some inline styles you can't control are present. `!important` makes such situations easier to deal with.
Other real life scenarios would also include some badly written jQuery plugins that also use inline styles...
I suppose you got the idea by now and can come up with some others as well.
When do you decide to use `!important`?
I suggest you don't use `!important` unless you can't do it any other way. Whenever it's possible to avoid it, avoid it. Using lots of `!important` styles will make maintenance a bit harder, because you break the natural cascading in your stylesheets.
Problem
Consider: ``` #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 in. Is there an example where `!important` saves the day?