CSS rules were made to be broken, or that’s the idea behind !Important. This !important CSS rule and property 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 would generally have.
!important was introduced with the CSS1 specifications in the mid-to-late-1990s. Since then, !imporant has mainly remained unchanged (only one change in CSS2.1. And is either a bane or boon depending on whether you’re using it or debugging its use.
Using !Important CSS Rule & Property
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 up 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 hard to follow.
More specific CSS rules tend to override less-specific CSS rules. For example, the basic, Lessspecific:
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 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 !Important CSS Rule & Property?
CSSTricks makes a case for using !important for utility classes but decries its use in almost any other situation.
!important could be ethically present as a temporary fix to an urgent issue. Though it should not be the end of a project. Once the critical problem is fixed, pains should be ready to dig back into the code and fix it without using 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 is 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 resulted from the lazy use of !important.
Devs
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 problem, additional !important rules are implemented, further muddying the code. When it comes to !important, would you rather be the person to cause and continue a problem or the one to fix it?
