CSS rules were made to be broken, or at least that’s the idea behind !important. !important is a CSS rule that makes it possible to override other previous styles spread across multiple style sheets. !important essentially defines something as important (imagine that!), ignoring subsequent/conflicting rules. It makes the CSS style with the !important designation the one that counts most, nullifying any others. Essentially, it gives a CSS value more weight than it otherwise would normally have.
!important was introduced with the CSS1 specifications, in the mid- to late-1990s. Since then, !important has remained largely unchanged (only one change in CSS2.1), and is either a bane or boon depending on if you’re the one using it or debugging its use.
Using !important
Important is fairly straightforward as far as use. This example code snippet can help you to understand formatting:
p {
font-size: 12px !important; }!important comes after a CSS declaration, but before the ending semicolon. A space before the semicolon won’t break it, so long as !important is placed as such at the end of the line.
Sorting and Overriding CSS Rules
!important influences sorting according to importance and origin. According to W3C, the ascending order of precedence is:
- User agent declarations
- User normal declarations
- Author normal declarations
- Author important declarations
- User important declarations
Confused yet? You’re not the only one. At this point, it’s (!)important to also take note of limitations. Browser Support for !important exists on IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Overriding CSS rules are complicated.
More specific CSS rules tend to override less-specific CSS rules. For example the basic, less specific:
h2 {
font-size: 12px; }Is overruled by the more specific:
#container h2 {
font-size: 14px; }Of course, if you were to apply !important to the former, it would work to override the latter.
In the case where two CSS declarations have the same weight, order, and specification, it’s the later that overrules all else.
Furthermore, according to Smashing Magazine, If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents.
Should You Use !important?
CSSTricks makes a case for using !important for utility classes, but decries its use in almost any other situation.
!important could be ethically used as a temporary fix to an urgent issue, though it should not be the end of a project. Once the urgent issue is fixed, pains should be made to dig back into the code and fix them without the use of this CSS declaration. Alternatively, a browser inspector tool might be able to help you determine and fix an issue—without the use of !important.
A final use case possibility for !important lies in pages or blog posts that require unique styles. As with the case for improving accessibility, this solution would only affect certain pieces, and not the general version of the website as a whole.
The main issue with using !important is that it makes it hard to debug CSS issues, especially when passing code from one developer to another. If you’ve ever been ready to pull your hair out because you couldn’t figure out what exactly is causing a specific style, it probably was a result of the lazy use of !important.
Most developers are publicly against !important, but its private use is what ultimately causes these numerous debugging issues. More often than not, instead of finding the root of the issue, additional !important rules are implemented, which further in muddying code. When it comes to !important, would you rather be the person to cause and continue a problem, or the one to fix it?
