Michael Gearon

!important rule in CSS: when and how to use it

Michael Gearon

The !important rule in CSS is a powerful tool that should be used rarely and for a (very) good reason. It gives you the ability to override styles and breaks the natural cascade of CSS styles. As Stephanie Rewis said:

Using !important in your CSS usually means you’re narcissistic & selfish or lazy. Respect the devs to come…

What is important CSS?

By declaring !important you are saying that the CSS value you’ve given the importance to has more weight than it would normally have.

Example

Let’s look at an example of how the !important rule can be used. If we look at this HTML:

<h1 id="headline">An orange headline</h1>
h1 {
    color: orange !important;
}
#headline {
    color: red;
}

What is the use of important?

!important was introduced to CSS to mainly deal with foreign CSS. Foreign CSS is styles that you can’t control and improve yourself. This can happen in two ways:

  1. User styles: this provides a way for you or your user to create your own CSS to inject on websites owned by other organisations or people. This is quite popular in plugins and whitelabeling services
  2. JavaScript Frameworks & External Libraries: this applies to libraries like Normalize or Bootstrap. If you’re referencing them using a CDN link then you can’t directly edit these stylesheets so you may use the !important rule to overide the default styles

Is it bad to use important in CSS?

In short, using the !important is bad practice and should be avoided where possible. The reason why is that it makes debugging challenging and breaks the natural cascade in your CSS.

Before using the important declaration you should attempt as much as possible to fix the original problem that is stopping you from writing the CSS without it.

It is there to use, but don’t abuse it.

Summary

In some (small) cases the !important property can be useful when needed. By using this property is could impact the accessibility of your website as it could override the default user agent or author stylesheets.

Further reading

First published on

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects