CSS – When should you use !important?

CSS – When should you use !important?

Let’s start with an example

In your inbox, you have a lot of emails that you will need to prioritize so you can organize them, and work through.

It feels important, so you put a red flag on ALL of your emails.

Now ALL your emails have a red flag. Is that.. good? Will that help you prioritize your work?

Probably not.

It might even sound pretty stupid (it is) because now you’re gonna have to use ALL CAPS TO SHOW IMPORTANCE. THEN WHAT? EXCLAMATION POINTS?!?!?!?!!!

Yeah… pretty stupid, right?

So… if that makes sense… then…
you should avoid using !important in your CSS as much as possible.

 

It’s like trying to nail everything down regardless of usage.

 

CSS is a stylesheet language, and with so many moving parts on a website, it should be fluid rather than rigid. Especially in the age of responsiveness, nailing things down and hijacking the whole cascade causes way more problems than it fixes.

CSS rules are like a bunch of small little recipes, for example

.pizza {
  border-radius: 50%;
  border: 4px cheesy crust;
  display: dough;
  background: pizza-sauce;
  toppings: pepperoni;
}
.pizza:after {
  content: "beer";
}

(note: that’s not real CSS)

 

and you want to put a pizza on every table.

But some tables are for kids. So naturally, you’d add something like

.kids.pizza:after {
  content: "sprite";
}

And it’ll work just fine.

 


(Yup. for kids.)

 

…. But… just because someone didn’t know what they were doing, and wrote this instead:

.pizza {
  border-radius: 50%;
  border: 4px cheesy crust;
  display: dough;
  background: pizza-sauce;
  toppings: pepperoni;
}
.pizza:after {
  content: "beer" !important;
}

Now

.kids.pizza:after {
  content: "sprite";
}

Won’t work AT ALL.

What you’re gonna have to do is crank it up a notch.

 

 

wait.. no, with CSS.

 

Like this:

.kids.pizza:after {
  content: "sprite" !important;
}

And that’s just stupid. It’s the inevitable solution to a totally preventable problem.

But it gets worse. What if someone (the driver) wanted… Pepsi with their pizza?

.pepsi.pizza:after {
  content: "pepsi" !important;
}

won’t work at all, and you try something like

.pepsi.pizza:after {
  content: "pepsi" !important !important /* oh come on please stop giving me Sprite, I want pepsi! not even coke, just pepsi, is that too much to ask oh god make it stop giving me sprite */;
}

and it still won’t fix anything.

 

 

It’ll have to be something like:

#thisworks .learnCSS.seriously.pepsi.pizza:after {
  content: "pepsi" !important;
}

Which means you’re going to have to find a way to make sure the element that’s being targeted works with the selectors.

The more this happens, the worse it gets.

 

So it’s basically, if you have an !important in the CSS, but you have to work over/around it, CSS specificity comes into play. If that’s the case, there’s no point in using !important in the first place. That’s the whole point. !important is usually just a bad-coder’s crutch.

OK.. so.. why?

 

Why is this happening?

 

“But I read in a tutorial…”

 

OK… so…

I’ve seen many people use this worst-practice method as the provided code for tutorials on a lot of websites. This is just flat out irresponsible. Please learn before “helping/sharing.” This is one of the largest culprits. Some people just add !important everywhere in their tutorial code, and the people wanting to learn from those tuts just end up seeing bad code, and learn from that, propagating and perpetuating stupid CSS.

This is probably from one of two reasons.. The person writing the tutorial was just trying out code without knowing how it works properly until it sticks, and they think that’s the solution.

 

 

It’s the wrong approach. They should be more responsible.

Another theory is, some people complain that a certain tutorial is not working, and adding !important sometimes just plows through the cascade and forces it, so it seems like a good idea. The “it’s ok this one time” mentality isn’t helping anyone though.

 

I’ve even seen truckloads of people say “hey, if it doesn’t work try putting !important at the end.” and of course, it sometimes works, and people say “gee, thanks, you must be a wizard! I’m going to put !important at the end of everything from now on.” … and they never learn how to write proper CSS.

 

 

Just learn about CSS specificity (link) and it’ll take care of at least 90% of your problems.

If you want to learn how to write CSS specifically for Divi consider learning properly here:

 

[sc name=”learn css”]

 

So not ever ever?

So never ever ever use !important? Like ever?

I didn’t say that… it exists, and it can be used properly.

So let’s get serious now.

 

So here are three (reasonable) instances to use !important.

 

When to use !important

 

1. To override other !importants

This one’s a given. The only way you’re going to override another !important is with another !important.

The most prominent !important that I’ve encountered when working with Divi is the last column sticking to the right.

Divi has this CSS snippet in its default stylesheet. (or something like that.. I’m just typing this from memory)

.et_pb_row .et_pb_column:last-child {
  margin-right: 0 !important;
}

That sort of sucks when you’re trying to arrange a column so it’ll be centered. (This affects even flexboxes and everything, so it’s annoying)

Note: ET has taken out a lot of !importants in the CSS, so it’s much easier to write non-shouting CSS rules. So that’s good.

 

2. To override inline css

This is an inline style:

<p style="text-align: center;">This will be centered</p>

Inline styles are added mainly in two methods: TinyMCE and jQuery.

TinyMCE is basically the WordPress classic editor. When you add styles to the text, like alignment, color, etc, then it adds an inline style. This isn’t usually a problem since it’s a conscious choice made by the content creator. Technically, this is added via JS, so.. next method

jQuery is a JavaScript library that’s pretty useful for adding extra interactive features. For example, Divi has some JS that adds the top padding to the page after getting the size of the navigation bar (header). (note: this is why Divi has the jumping header issue. The JS needs to load and apply the styles later) The thing with the JQ styling approach is that sometimes you might not need/want what the theme is doing, so you might have to override that sometimes.

This is a very understandable reason to being forced into using !important.

 

3. To use classes like inline styles

Having said all that, the only actual case for using !important in production that I’ve encountered is using a class like an inline style. something like this:

<p class="text-white">This text should be white regardless of other factors</p>

In cases like this, it’s a lot easier to manage than regular inline styles.
(If you want to change a certain color, changing one rule is better than locating all the places it’s been defined inline.)

So something like this:

.text-white {
  color: #fff !important;
}

can be useful, especially when you’re dealing with a lot of layout templates, and everything has its own styles defined, but you really need to make that specific part a certain color. Then yeah, this works.

 

Conclusion

This was a pretty long post haha, but I really hope it all made sense, and you find new motivation to learn more about the exciting world of CSS. Once you learn how to write your own code, your web development skill/method will be upgraded forever.

Again, if you want to learn how to write CSS specifically for Divi consider learning properly here:

 

[sc name=”learn css”]

 

[sc name=”podcast”]

 

 

Photo by Paul Hanaoka on Unsplash

Leave a Reply to PK Cancel reply

Your email address will not be published. Required fields are marked *

  1. #lessonlearnt .learner-designer css{
    understood: should only use the important tag to place a hierarchy over the main css !important ;
    }

    Guide good PK have bookmarked for future reference, I try to avoid it as much as possible. I think I have discussed a case why no to use on my own site, with a tag being overwritten cause of !important tag.

    • hahaha

      #clever.response {
      kind-words: thanks;
      }

New tutorials

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.