Stop Writing !important in your CSS Code, and Do This Instead!
Tags: webdev, css, html, tutorial
Published: 2023-04-24 14:20:17


> 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](https://unsplash.com/@der_maik_?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*p-AayuO3yv3OoSti)
>  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.

```css
    * {
     color: red; !important
    }
    In CSS, this is the !important property.
```
```html
    <p style="color: purple"></p>
    
    In HTML, this is the Inline Styles
```
```css
    #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
```css
    #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](https://caniuse.com/css-cascade-layers), [**CSS Cascade** for an alternative, modern solution too!](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)

- You can also test out your new profound knowledge with [this **Simple Interview Question**!](https://dev.to/morninglit/most-developers-fail-this-simple-css-interview-question-css-specificity-pmk)
{% embed https://dev.to/morninglit/most-developers-fail-this-simple-css-interview-question-css-specificity-pmk %}


---

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.**](https://developer.mozilla.org/en-US/docs/Web/CSS/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!**](https://specifishity.com/)

A game about CSS Selectors is found [**here!**](https://flukeout.github.io/)

There are more detailed explanations found [**here!**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)