DEV Community

Ambrose Liew
Ambrose Liew

Posted on

Stop Writing !important in your CSS Code, and Do This Instead!

Ever wrote !important in your CSS file to override a CSS property?
Come learn CSS Specificity to remove the need to write !important ever again!

Photo by [Maik Jonietz]( on [Unsplash](

Why shouldn’t I use !important in my code?

First and foremost, I would like to address the elephant in the room. And that is why we should not write !important in CSS.

There are a number of reasons, but the main reason is that if you are working on a large project with other developers, writing !important makes the project more unsustainable to manage.

What do I mean by unsustainable to manage? If more developers in your team started to write !important in the CSS codebase, it becomes increasingly difficult to apply your own styles. You would have to resort to writing !important yourself in hopes to override their styles or you will have to edit their styles to decrease their CSS specificity.

What does CSS specificity mean? Continue reading to find out more.

What is CSS Specificity?

CSS Specificity is the algorithm that determines what CSS property is applied to an element.

There are 5 main categories that contribute to CSS Specificity. They are !important, inline styles, ID, Class, and types. You can think of these categories in the form of this representation: 0–0–0–0–0 in that order.

    * {
     color: red; !important
    In CSS, this is the !important property.
Enter fullscreen mode Exit fullscreen mode
    <p style="color: purple"></p>

    In HTML, this is the Inline Styles
Enter fullscreen mode Exit fullscreen mode
    #abc {
     color: blue;
    .def { 
     color: yellow;
    p { 
     color: green;

    Any word with a '#' in front is an ID selector.
    Any word with a '.' in front is a Class selector.
    Without anything in front is a Type selector.
Enter fullscreen mode Exit fullscreen mode


    #container div.home-select > .dropdown span {
        color: red;
Enter fullscreen mode Exit fullscreen mode

The above CSS property has the specificity: 0–0–1–2–2

Because there is 1 ID selector (#container), 2 Class selectors (.home-select, .dropdown) and 2 Type selectors (div, span).
Assuming there is no inline-styles applied to it.

So how do I apply this knowledge?

If you felt that you have learned something new, do feel free to follow 🥰, drop a react 💖 or write a comment ✍️!
It helps makes me create and share more valuable content for you to become a better Web Developer! 🤗


Since you cannot stack !important and inline styles, the first two values can only be either 1 or 0.

For those wondering, the > is the symbol for the direct child combinator.

Attribute selectors like [type="radio"] and [lang|="fr"]and Pseudo-classes like :hover, :nth-of-type(3n), and :required all add to the Class specificity.

Pseudo-elements like ::before, ::placeholder all add to the Type specificity.

There are also certain selectors without any specificity value, eg: *, where().

You can actually stack classes/ids to increase the specificity, eg:
#home#home#home .container.container would have the specificity value of 0–0–3–2–0.

A pictorial view of what I have explained can be found here!

A game about CSS Selectors is found here!

There are more detailed explanations found here!

Top comments (2)

Some comments have been hidden by the post's author - find out more