The !important Things
!important was introduced “to create a balance of power between author and user style sheets”– to ensure that the user has the final say in their online experience. Users with accessibility concerns, for example, can write their own stylesheets to bump up base font size or increase contrast.
!important is useful here because it guarantees that those styles will take effect. When used in author stylesheets, however,
!important is not just unhelpful, but detrimental. This “Jedi mind trick” might get you the styling you want, but it also:
- makes code harder to maintain, since it can now only be overridden by other
- doesn’t require understanding the rest of the CSS, or how different parts of the stylesheet interact; and
- can be used to sweep messy HTML/CSS under the rug.
Essentially, it promotes bad practices and code obfuscation. If you have to deal with legacy / ineditable code and find yourself forced to use
!important, my sympathies, and best of luck. If you are, however, developing from scratch, then I urge you to not use
!important. Ever. The great thing is, it can be avoided by adhering to good – not even best – practices.
Here’s how to avoid falling into the
Load stylesheets wisely. Third-party, base, etc. stylesheets (such as Bootstrap‘s) are easier to override if you load them before in-house or project-specific ones.
Stay away from inline styles, especially if you think you’ll need to modify them later. Overriding inline styles from a stylesheet can only be done with
Keep selector specificity to a minimum. Consider whether you need to use
.foo.bar.bazor whether just
.foowill suffice. One red flag is using element and class selectors together (e.g.,
span.foo). If you need to do this to get the selector to work properly, then you have likely assigned the same class to elements that you want styled differently. If you need alert-style
ps, don’t handle it this way:
<h1 class="alert">Do you want ants?</h1> <p class="alert">Because that's how you get ants.</p> ... h1.alert color: #ff0000 p.alert font-weight: bold
Assigning the same HTML class and combining element/class selectors in the CSS makes your styling more complex and less readable. To avoid this, namespace your element classes, a la SMACSS:
<h1 class="alert-heading">Do you want ants?</h1> <p class="alert-text">Because that's how you get ants.</p> ... .alert-heading color: #ff0000 .alert-text font-weight: bold
If you want them to share certain styles, you can give an additional class (e.g.,
.alert) to both elements. If you’re using SASS/SCSS, you can instead make
.alert-textboth extend a common class or, even better, a placeholder class. (I made a JSFiddle of the latter – nifty, right?)
!importantfor state changes like in the code examples above, which I disagree with. If you assign and declare your CSS properties prudently, you can give elements state changes using pretty minimal selectors and certainly without using
Optimizing selectors is, naturally, easier if you:
Understand how CSS selectors actually work. You get an intuitive sense of what works from writing a ton of CSS, but taking a gander at the documentation never hurts. I recommend these two articles on CSS selectors from Smashing Magazine and CSS-Tricks. I also adore this CSS specificity tester, which helps bridge the gap between theory and practice. Tools like this can help you understand why, among other things,
body > main > div > p > span > a.
Don’t even start. Even one use of
!importantcan ignite a one-upmanship war in your stylesheets. So don’t use it, tell your team not to use it, and refactor legacy code where you can. Tell your friends; tell your parents; train your dog to shun treats shaped like bangs.
One further recommendation – maybe you saw this coming – is to use SASS or SCSS instead of straight CSS. SASS gives you fewer characters, shorter lines, and some exciting tools (variables, extends, and mixins, to name a few). Each of SASS’s features is good on its own, but when they’re all used in conjunction, the result is truly powerful: you are much more in control of your code.
!important is a crutch, and devs use it when we don’t know what else to do. We use it when our code is out of control – it’s too long, or convoluted, or opaque, and we can’t get it to work properly. The only way to combat this is by writing succinct, elegant code. Let’s make the web a beautiful place.