loading...
Cover image for Using !important in CSS

Using !important in CSS

alvaromontoro profile image Alvaro Montoro ・2 min read

Web Accessibility with CSS (9 Part Series)

1) Web Accessibility with CSS 2) Allow end-user styling overrides 3 ... 7 3) Using !important in CSS 4) Use font-relative units for font sizes 5) Accessible text 6) Color contrast: text 7) Color contrast: beyond text 8) Do not just use color to convey information 9) Limit pointer-events to graphic elements

Don't.

Blank image placed here to create some dramatic effect before I give an explanation of why !important should be avoided in CSS

You are still here, so I guess you were expecting a more detailed explanation... here it goes:

The use of !important is considered an anti-pattern and bad practice. !important overrides all other declarations and makes the CSS code more difficult to maintain and debug. The only thing that can override an !important is another !important, and once you go down that road, it never stops.

From a Web Accessibility perspective, the use of !important is negative because it would override the end-user defined styling. And there are multiple cases in which users –and especially users with disabilities– may want to override some of the CSS properties (e.g. to enlarge the font size, or change the font-family, or even change the distribution and position of elements in a page.)

What can developers do instead of using !important?

  • Use more specific selectors: add the element tag before the class/id name, or a new class name... anything that increases the specificity of the selector.
  • Take advantage of the CSS cascade: if needed, restructure the CSS and move the CSS rules, as if two rules have the same specificity, the one that appears later "wins."

Note: as specified in the comments, there are some cases in which !important may be useful (e.g. forcing immutability in utility classes, styling email campaigns, or in the end-user styles), but in general –and for the purpose of accessibility– it is better to avoid !important because it takes away power from the users to customize the experience to better fit their needs.


Avoid using !important in CSS.

Web Accessibility with CSS (9 Part Series)

1) Web Accessibility with CSS 2) Allow end-user styling overrides 3 ... 7 3) Using !important in CSS 4) Use font-relative units for font sizes 5) Accessible text 6) Color contrast: text 7) Color contrast: beyond text 8) Do not just use color to convey information 9) Limit pointer-events to graphic elements

Posted on by:

alvaromontoro profile

Alvaro Montoro

@alvaromontoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🤘

Discussion

markdown guide
 

Hello 👋🏻!

I agree that it’s used in bad ways which leads to messy code. Many of us have seen a lot of bad or horrible ways of how it’s used in projects.

But I’m going to argue that I actually think !important makes a lot of sense if you’re understanding why you’re using it. It has a very bad reputation but I think it’s used in the wrong way. I don’t think the tool itself should get the blame but rather how devs use it. It all depends on what you want to achieve.

Here’s a read if you’re interested in why it’s useful an not an anti-pattern: csswizardry.com/2016/05/the-import...

Kindly
David

 

I agree that there are some cases in which !important could be interesting (and it will most definitely need to be used in the user-defined styles to override the ones from the site). But from an accessibility perspective, the idea of immutability (from the developer side) is dangerous, as it takes away power from the users to customize the experience to better fit their needs. Let me recheck the article, and I'll edit and add a note about it.

 

Look I'm not saying that !important is a dangerous anti-pattern, but in 10 years developing websites as my main revenue source the only times I've had to use it is when someone else used it before (by example in a WordPress theme, if I had to pick at random).

I get the point of your article about utility classes being all alone and depraved of specificity thus needing a bit of help from !important but that is so edge case, it should definitely be a last resort after you've exhausted your other last resort options.

 

I don’t agree. As I mentioned I’ve also joined projects that make horrible use of !important. I’m not arguing against the fact that most projects utilizing it are doing it for the wrong reasons.

And I think you’re misunderstanding the intention of utility classes. If you only use !important in your utility classes, the idea behind the pattern is that they will be the last layer of CSS you will apply to elements, making it very predictable. This is based on the ITCSS pattern.

I think specificitiy tangles can be far worse because they can be much harder to track and in most cases ironically the reason why some devs decide to use !important out of frustration. In contrast, bad usage of !important is very easy to spot.

Here’s more in depth about specificity.

 

Guilty as charged, but only as a last resort when I'm at the end of my tether with my out of control CSS. I've been trying to implement a BEM approach but the tips you have given here will be helpful too.

 

I believe there is no valid use cases for !important. Your suggestions on the alternatives are top-notch, and following these usually makes your code cleaner.

 

You've clearly never built an HTML email :) inline styles for Outlook so need to use !important to overwrite them... horrible but in this case necessary.

 

inline styles will replace !important

I learnt this by the video trivia by web dev simplified and kevin powell!

And kevin as a CSS Mastermind lost to this question... Very bad!

But, Kevin is the CSS Master!

 

Wait...!important will trump inline styles 🤔

 

You made me doubt for a second, so I created an example of it for another comment: !important does override inline styles.

 

Actually I expect custom origins/cascade layers to eventually replace most !important use. But it'll be some years before we can use them.

 

Important is not bad it's the situation that leads to this being used that's bad. In a JavaScript context it has some uses I suppose.

 

After seeing the title I was hoping so hard for this first paragraph to be there, thank you for making my dreams true.

 

Agree however I do use !important a fair bit in the work I do with HTML emails because Outlook..., but I tend to avoid in anything else.

 

Sometimes you need to apply styles to elements abstractly so you can't get specific with your selectors.
Also online styles will override !important if you add !important to the online style itself.

 

When I find elements that are too generic to style, I normally solve it by adding a class/id to the elements or one of their ancestors, which allows for easier and more specific selectors. Do you have an example of applying styles to elements abstractly and how did you fix it with !important?

Also, inline styles do not override !important as it can be seen in this example:

 

Right i actually meant inline with !importa overrides styleseet !important

 

Hahaha, your "You are still here...", it is so cute 🤣