CSS: If it's !important, do it right
!important is a CSS exception that forces the current property's value to be used instead of any-other declaration of the same property, independent of the rules of CSS specificity.
Meaning that whatever you declare as !important, is applied no matter what any-other CSS rule says.
You can use it by adding !important at the end of your CSS property declaration, right after the value, like:
selector { property1: value1 !important; }
For example, if you'd like the browser to hide elements with the class hide, no matter what, you can use:
.hide { display: none !important; }
Now, every element with the class hide will have it's display property set to none and therefore be hidden, even if the individual element has a more specific display property, like with it's ID as the selector or with an inline style saying otherwise.
Why is it bad?
The key argument against using !important is that it makes maintaining and building upon your CSS, very hard by the fact that it cannot be overriden by anything other than a more specific !important statement.
Keep in mind that whenever you feel the need to use !important, there is almost always another way.
When to use it
That said, there are a few, extremely rare cases where using !important is the best option available. Let's look at a few of those:
Overriding styles inserted by third-party JavaScript
Some third-party JavaScript plugins that you use may style your elements, but fail to provide an API that allows you to customize those styles - in most such cases you'll probably have no other go but to use the !important declaration to override those styles with your own.
Overriding a !important declaration in a third-party stylesheet
Because a !important declaration can only be overridden by a more specific !important declaration, it becomes your only option when you have to work with a third-party plugin that uses !important
In classes that are designed for a clear & specific purpose
Like the hide class we looked at earlier, where the only reason we'd be using it is to force the element to hide, it may be alright to use the !important declaration, given that you don't use it on a property that could be inherited by it's children.
Doing it right
If you ever find yourself in a situation where you have no other option but to use !important, here are a few guidelines that could help you use it without killing maintainability:
Be as specific as possible
Make sure you use selectors that target as few elements as possible, ideally just the particular element that you are trying to affect. So, prefer to use the ID selector or a unique class, along with child selectors, as required.
Don't use it on properties that could be inherited
Using !important on an inheritable property like color or font would mean that you cannot change it on any of the element's children, unless write another, more specific !important declaration to that effect, making it much harder to customize it. Look through the CSS reference to check if a property is inheritable or not.
Put it in a separate stylesheet
Since using !important is bad for maintainability and given the fact that there is almost always some way to avoid it, it might be a good idea to put it along with the rest of your CSS hacks, in a separate CSS file, so that you can easily replace it as and when you discover a better way to do the same. Read more about why having a separate CSS file for hacks is a good idea.
Conclusion
Whenever you feel the need to use !important, keep in mind that there is almost always a more specific rule that you could be using instead, so for the sake of the poor dev who'll be building upon your CSS a few months from now, it is !important that you do your very best not to use it.
Further Reading:
CSS Specificity on MDN
Common CSS Questions on MDN
!important on SmashingMagazine
When Using !important is The Right Choice on CSSTricks
Shame.CSS
Discussion on StackOverflow
















