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:


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 !important trap:

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.


Now read this

On Knowing Something

“The only thing I know is that I know nothing”–a profoundly humbling statement, courtesy of Socrates. As a corollary, he declares himself wiser than other men, but only because he has come to terms with his utter ignorance. In many ways,... Continue →