The CSS declaration for “!important” has been around for a long time – since the original CSS specification. However, not many people understand exactly what it should be used for, and more importantly what it SHOULD NOT be used for.
First of all, what exactly does this declaration do? If you are mildly familiar with CSS techniques, then you understand the “Cascading” part of the CSS name. The ability to override a style with specificity (the concept of being more specific when writing a style), and have it cascade to multiple elements below is a very powerful tool. The important declaration overrides the cascade and ignores styles that are more specific. It ensures that your style is “most important”. The drawback here is that if you use this then you prevent people from using the Cascading Style Sheets the way they were meant to be used.
A personal pet peeve of mine is when people use it simply because they are too lazy to figure out how to properly override a style with specificity. That being said, the declaration can be handy in some scenarios. The declaration should generally only be used for two basic scenarios in my opinion:
1. Temporarily – You can make lots great use of the declaration for temporary purposes. By this I mean when you are working inside your developer toolbar and want to test a style out, or perhaps you are working on a style and just want it to take effect for testing purposes.
2. Third Party Components – Sometimes when using a Third Party component that injects its own CSS styles, there is simply no way to override a particular style in question. You have maxed out your specificity, your only option left is to use the important declaration.
This article here is a fantastic summary about some specific scenarios for using Important such as, and re-iterates some of the points I made as well:
– To Aid or test Accessibility
– Special Blog Posts
– Print Stylesheets (thought this was an interesting use of the declaration)