Why not to use !important in CSS?

10Responses

Write your response…

This answer has received 3 appreciations.

There's a lot of superstition and opinion surrounding !important dating back a long time.

As with any tool:

  • there's a reason it exists
  • find the reason it exists and understand the use-case
  • using the tool for this purpose is 'use'
  • using the tool for other purposes is 'abuse'

So having said that, there is a reason !important exists - sometimes you need it as a last resort to have your style overpower other styles. Sometimes this is because of bad CSS you can't change, or HTML you can't change (often when trying to override plugins or embeds). The reason it exists is because sometimes the alternative - getting the same effect done without using !important leads to even uglier code than the 'code smell' of using !important, like using long, complex selectors to bulk up your specificity.

When should you use !important? When every other tool in the toolbox of CSS has failed you and what you need to be able to do is severely ramp up the importance of a particular value for a property.

When should you avoid using !important? If you haven't tried:

  • creating a more specific rule
  • refactoring your bad CSS (if possible)
  • rearranging your HTML (if possible)
  • and still you're having difficulty

Once you've used it on a few projects you'll get a better understanding why it's so useful and often so excessive and why people are so cautious about using it — but the best way to understand all of these things isn't to avoid it, but to try using it yourself and see what happens. Experiment. And try to learn how to override a property with !important (Hint: it involves a more specific selector).

I hope my comment and the other comments here can shed some light on this unloved part of CSS <3

People feel sometimes even if there was !very-very-important when there is no way to override !important that is styled inline in some plugin. The only way becomes available through JavaScript. Thus, !important must exist in upcoming future as well.

Write a reply...

This answer has received 1 appreciation.

I would use it, if if have certain override classes. but those have to be semantically defined.

.forceNoBorders {
    border: none !important;
}

so unique imperative compositions to override certain behaviours. I personally prefer to split CSS between layout and positioning.

But in my opinion every !important that is not in class or is based on a inheritance chain and such -> for example

#my-container {
    some-property: some-value !important;
}

.my-container > div.class > span {
    some-property: some-value !important;
}

is to my eyes only valid if you don't have access to the source CSS or HTML code. it's still ugly but it's allowed .... still all those definitions should be written in a "shame.css" (an idea I picked up from the wearedevelopers conf) so we know the person who writes it is aware it's not okay to write such styles.

Write a reply...

Personally, I think you should use !important in your CSS. It is a tool like any other. It has its use cases and if you know when and how, it is very helpful. Most people, however, do it wrong. It's not that it's difficult, people just don't know how to. Since so many people don't know proper CSS architecture, many people just tell you not to use it in order to make your CSS life easier. Imho, it's the wrong way to deal with the symptoms. Why not fix the root problem?

  1. Learn proper CSS architecture, for example using BEMIT and ITCSS.
  2. It's tedious in the beginning, but actually use proper CSS architecture
  3. Use !important with confidence.

Example:

.u-borderless {
  border: 0 !important;
}

.o-avatar {
  border: solid 3px black;
  height: 50px;
  width: 50px;
  margin: 5px;
  /* ... */
}

.o-avatar--premium {
  border: solid 3px red;
}

The above CSS is ordered as defined by Harry's ITCSS layers and uses BEMIT naming conventions. On a regular site (e.g. a forum with users), you usually want later rules to overwrite earlier ones, so you can have html, like

<article class="o-article__block">
  <div class="o-article__user-bit">
    <img class="o-avatar" src="/users/12345/avatar.png">
  </div>
  <div class="o-article__post-bit">
    I am a regular user!
  </div>
</article>
<article class="o-article__block">
  <div class="o-article__user-bit">
    <img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
  </div>
  <div class="o-article__post-bit">
    I am a premium user!
  </div>
</article>

However, you might want to have a utility to remove all border information for special cases. Let's say, there is a BBCode to remove the border from anything. A user \@-mentions another user, which might insert the user's avatar. You usually want to keep all the other CSS of the avatar (which might include mediaqueries, background colors, dimensions, transformations, etc.), but just remove that border. That's the time for a utility-rule, which just removes the border, no matter what the other rules do.

<article class="o-article__block">
  <div class="o-article__user-bit">
    <img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
  </div>
  <div class="o-article__post-bit">
    <a class="o-post-bit__link o-post-bit__mention-user" href="/users/12345">
      <img class="o-avatar / u-borderless" src="/users/12345/avatar.png">
    </a>
  </div>
</article>

Since we use proper CSS architecture, there are no side-effects and the utility rule is even required to have !important so that it can do its magic in all situations.

I hope this example makes it clear why !important is important and how to use it. Also, I hope that you came to understand that proper architecture is imperative and can solve most (if not all) of the CSS problems you can encounter :)

Write a reply...

In most cases, it's a sign that your CSS is overriding itself and should be refactored to be simpler; or selectors lightened/weakened.

There are cases where it's ok to use it of course, but not as a general approach to writing CSS. It should only be for cases where you have an extreme need to enforce something, or if you are having to write CSS to override other CSS you can't control (eg. third party code).

Most of the time though, it's just a code smell.

Write a reply...

Because, it will override all other occurrence of the property.

Consider this:

.my-class {
    width: 400px;
}

.my-class {
    width: 100px!important;
}

After this all the elements having class my-class will be forced to scale to width 100 pixels. Which is bad because you may not notice this, which may create a lot of bug(s) which will difficult to find. The style sheet will not work as planned if you do not know what you are doing. It's not always bad to use !important. But you must know where to use it. And in most cases it's better to avoid it with some well planned CSS.

For more you may look more on CSS specificity. This might help.

Hope this helps. :)

Write a reply...

Load more responses

Join a friendly and inclusive Q&A network for coders

  • 🖥Pick the technologies you like & read great content through your feed.
  • 💬Ask a question when you want to learn more about anything.
  • 🚀Share what you know & build your portfolio.
Sign up nowLearn more

loading ...