Thread by @sumitsaurabh927

🧵 CSS explained: Specificity in CSS

In today's thread we'll look at:

✔ What is specificity
✔ How is it calculated?
✔ The best way to use specificity
✔ Is there a thing as too much specificity
✔ Some important things to note

Let's begin!

➣ So, what is specificity?

For every element, the browser has to decide what CSS rule to apply.

It does so using an algorithm, called specificity.

The browser essentially looks at the stylesheet and based on specificity scores of each element, decides what rule to apply.

➣ And how are these specificity scores calculated?

The specificity scores are calculated using the following rules:

➛ for every tag: 1 points
➛ for every class attribute: 10 points
➛ for every id attribute: 100 points
➛ for !important: 1000 points

You can see the css rules and the corresponding specificity scores in the attached image here:

➣ So, what's the best way to use specificity?

Well, the best way is to use class names for styles repeating across multiple elements on the website and use ID if you want to target one element specifically.

It is generally a bad idea to have more than one ID usage per page.

➣ And is there such thing as too much specificity?

Yes, you can go wild with different selectors and sibling selectors.

But don't

That means don't use things like: '.className #id li.active'

Don't go overboard.

Be reseanably selective!

➣ Some important things to note:

➛ The use of '!important' rule overrides everything.

➛ Its specificity score (1000) can only be over-ridden by another '!important' or by matching a 1000 points using other rules.

➛ The universal selector has a specificity score of 0.

That's a wrap!

If you enjoyed this thread:

1. Follow me @sumitsaurabh927 for more of these
2. RT the tweet below to share this thread with your audience

https://twitter.com/sumitsaurabh927/status/1549414408065089536