The importance of !important in your css, for dummies

The most used and sucked CSS add-on instruction. The most controversial and easiest to use.

Doesn't that link turn red? Pam! You add a color: red!important and "shell" it. Easy. Fast. Exponentially problematic especially in large projects with more than one "participant".

The tortilla, with !important or without !important?

I don't know anyone who doesn't use a !important from time to time. Really, and whoever denies it is either lying, or is working on a project or team where they are totally prohibited from using it (for reasons of software quality, but hey, this is paid for).

If everything is bold, nothing is bold; ergo, if everything is !important, nothing is !important

Filemon Pi

When you are newer, it is easy to fall into the abuse of !important. Personally, I am a defender and supporter, with my reservations. But this is a personal opinion, like my ass, I mean, everyone has one or one.

The "dev pro number one" argument, about why you shouldn't use !important:

The !important is used to test either as a provisional measure, once you prove that the style is correct and the element "gets it", you have to remove the !important and be more specific with your CSS rule. Your new rule should be More specific that the rule that precedes it in waterfall.

Nanoblock Constructions

pixel-perfect games

#loNeed #buildingBlocks #buildCheaper

Only 4,90€ !

see more

What a waterfall, what are you saying, what is the specificity of that!

Specificity is the key. Specity. Speci… bah. Let's give an example that will be better understood. We'll start with the basics and then you'll see when the problems of "excessive specificity, specificity" come:

// We have here that, I don't know, the links are blue
to {
  color:blue;
}

// Now, we have a class .button, which makes the link have the shape of a button, and has a blue background and color, white, goes.

.button {
  display:inline-block;
  padding:5px 10px;
  color:white;
  background:blue;
}

// Eye; I can also put this .button class to the button element, so I will make all the buttons on my website, whether they are links or a form button, have the same appearance like a boss, right?

// Damn, well, I'm going to remove the underline from the link, when it's a .button... I could make this new combo-rule

a.button {
  text-decoration:none;
}

// Well, this is a combined rule, without spaces between element and class and it can be done, although they are also controversial selectors, but it works for me for this tutorial.

You follow me up to here, right? Okay, so we already have the blue button style and such. Ok, now, it turns out that... I have a block, a sidebar, a rectangle, which already has the background color blue. And I want to put a button inside this blue block. Damn, but blue on blue, don't see the button... Ains, okay, then hypothetically we would have:

.sidebar-box--blue {
  background:blue;
  padding:20px;
}

// I say well, well, my blue button, when it is inside the blue box, I will change its color, hale

.sidebar-box--blue .button {
  background: grid; // hale pos red
}

Okay, so, we've already increased the specificity of the CSS rule, in two ways, before, by combining a.button, and now, by saying "the button, but specifically the one inside the blue box (nice band). This is the waterfall.

We can be more, and more, and more specific, imagine that we have a special page template, a landing page, where everything that is blue is replaced with, let's say, gold, because look, the client or the design requests it for a marketing action or whatever. We could easily make some rules for this page using the body classname of that page template:

.page-template-page-marketing-peich .sidebar-box--blue {
  background: gold; // dorao is a very cool yellow
  padding:20px;
}

.page-template-page-marketing-peich .sidebar-box--blue .button {
  background: gold; // hale pos dorao
}

Well, what we are doing is increasing specificity, nesting more classes within others and establishing more complex rules, exceptions and such and such.

When you have a lot of CSS, it's easy for us to have to add a lot of these combined rules. And especially with any CMS + PLUGINS. Because form plugins, new blocks, shortcodes that paint things for you, etc., usually come with their own additional CSS. And with its own specific rules so that those tabs, that form, etc., look more or less good.

A diamond can only be scratched by another diamond; ergo, a !important can only be crushed by another !important (which comes later)

Popeye, nautical engineer

But of course, specific rules on the one hand, others on the other... and you find that some of your rules cause other elements to inherit properties (colors that don't touch, exaggerated margins...).

It is when you find yourself in a certain situation (nice word) and you already have to write rules as long as:

.page-template-page-marketing-peich .main .container .section-below .sidebar-box--blue .wpcf7 labels span button {
  background: pink;
  margin:0;
}

// take specific rule! (I've seen them longer, ahem, compiled sass makes them thicker)

// This is no longer "cascading style sheets", it is "catarating style sheets", the Niagara styles

Here comes when, if you have to make a change in the color of this button again because (imagine random reason) you say fuah… what if I say this?

.page-template-page-marketing-peich .button {
  background: gold!important; // WE FORCE the "dorao" again
}

In the latter case, I have written a shorter and less specific rule, the browser should interpret the previous one, due to its specificity. But since I have put the !important for the "face", (in fact, I always call it that way, "important for the face"), then pull, mate and crush.

That I have saved time snooping and writing... well yes. Have I killed any kittens? Have I thrown dirt in the eyes of the poor? Why not? Well then, I have two options:

1. I leave it as it is, and I go for a coffee
2. I evaluate. Am I at the beginning of the project, or finishing it? Is it a small project, or is it large and likely to continue? Is it a personal page that only I touch and take care of everything, or is it for a client? Is this project well paid, enough to allow me to be a purist because it's worth it?

Only you have the answers to the evaluation. But I'm going to give you an extra criterion, which I think is also very important.

As I mentioned, there are rules that are so long that our CSS file becomes HUGE (Imagine 500KB of minified CSS. I've seen it and you probably have too). Because it has many, many rules. And it almost always counts in 20 words, which can be counted in 2 or 3. This will happen if:

1. It is a large project, and we do not divide our CSS into several files, by functionalities or sections and we are purists, who "never mention the importance ña ña ña"
2. We use a preprocessor like SASS, where it is so convenient to nest and nest and nest. Ha, then when compiling the css, the rules are KILOMETRIC. BAD CODE! Yes, minification, yes, yes, yes, but this doesn't make sense.

With Clun Zion

Well, here we are, if I have to use a !important, I use it. But I have already explained the reasons that make me evaluate it, whether or not it is worth leaving it there so fresh. Above all, in this last part, I hope I have opened your eyes, especially on the issue of CSS size, which is a part that I find is ignored a lot, in these times, and is rarely mentioned in blogs.

I mean, optimization and good practices are always good, but you see, depending on how you write your CSS, it could be that you don't even need a posteriori as much as minification, gzip, render blocking and gromenawers performance moves.

Hale, I'm already comfortable!important.