The CSS !important wars

Long time ago in a World Wide Web far, far away… a small community of developers used the !important statement, just to be sure that no other code is changing anything of the styles you are defining… but finally their css ended with !important over !important over !important… and the web becomes a worse place to live. That’s when Yoda-veloper appears and said:

!important we should not use , for web safe it is.

Then, start the era of the Jedi-velopers and !important statement was buried, and the few one that used it were on the dark side of the web-force.

But then, when there’s no hope for the !important, in an era of atoms, molecules and organisms, where everything should be modular and front-end developers use preprocessors… the Jedi-velopers forgot the final generated css and they just care about the preprocessor code. It doesn’t mather if there are 100 more lines of css… The modern era bring sensation of control to Jedi-velopers… or that’s what they think.

All start with a few objects and his small variations:

CSS

.object { 
display: block;
margin-bottom: 16px;
}
.object--last {
margin-bottom: 0px;
}

HTML

<p class="object object--last">I'm the last object.</p>

I know: It seems ok, it’s a good solution and using the BEM syntax… so what’s wrong?

The problem is that if you repeat the example above twenty times (shit happens) you will get a lot of css code just to do the same: remove the margin-bottom when the object is the last.

Finally, a new light brights on the horizon, and a new hope for the !important statement comes to town: “Atomic CSS”.

The idea is pretty simple, to create small css classes to do just one thing, but using the !important statement, to assure that they always accomplish their job.

The first problem was a naming problem, because these classes should follow a logical pattern. If we check for standard out there the best we can get is the emmet abbreviation. Of course we can’t use “:” in css for a name so… let’s just replace it for slash and let’s see what we get.

CSS

.mb-n {
margin-bottom: none !important;
}

HTML

<p class="object mb-n">I'm the last object.</p>

Now it’s more clear to understand. But this is not the only advantage, because now we can modify our object without fear to get an extra space when the object is the last… and the most important: We are optimizing our css code with just a class to solve them all (But this is another movie). For me these little classes more than atomic are modifiers, and that’s the term I’ve used at the front-end framework I’m developing.

If you want to see a real implementation of what I’m talking take a look to the modifiers section at the docs of FrontendCore.

So, it looks like !important gets a job and those CSS linters that always say: “You can’t use !important” are a little old fashioned now.

It’s this the end of the war or just the end of the chapter IV? Time will say…

CSS Vader: Sass, I’m your father.

Like what you read? Give Toni Pinel a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.