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!

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.

    <p style="color: purple"></p>

    In HTML, this is the Inline Styles

    #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.

Examples

    #container div.home-select > .dropdown span {
        color: red;
    }

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?

• Try to be more specific with your CSS selectors, a higher value will always override a lower value.
  Eg. 0–0–1–0–0 has higher specificity than 0–0–0–10–5.
  The algorithm will check from left to right column, and whichever value has the higher value, will be applied for the CSS property.

• Remember the CSS also Cascades, so if you have 2 CSS properties with the same specificity value, put your desired CSS property after (below) the other undesired CSS property.

• Always try and refrain from using the most powerful tool first, if you do not want to calculate the CSS specificity, you can try to use inline styles instead.

• Be sure to check out the brand new CSS feature, CSS Cascade for an alternative, modern solution too!

• You can also test out your new profound knowledge with this Simple Interview Question!
  

  

  Most Developers Fail This Simple CSS Interview Question (CSS Specificity)

  Ambrose Liew ・ Apr 24 ・ 3 min read

  #css #webdev #tutorial #beginners

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! 🤗

Extras

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!