CSS specificity rules explained

#css

This article was originally written here -> https://easyontheweb.com/css-specificity-rules-explained/

If you have worked with CSS more than let’s say what we call “a bit”, you must surely have come across strange issues persisting to overriding of styles. Now, even though it feels like CSS is super easy to write and comprehend – one of the most important concepts to understand in CSS are the CSS specificity rules.

As I told before, writing CSS does not seem very difficult (except for the design part which is hell) but when the project is large, only then we truly get an understanding of how vast and confusing it could be to work with CSS.

One of the most common issues faced by developers is that of overriding styles – sometimes you write a style some place and it just doesn’t work. Sometimes you write it at once place and it affects many other places you didn’t want it to affect. We’ll be looking at how the knowledge of CSS specificity rules can help you get out of some of these issues and give you a better understanding of how CSS works.

What are CSS specificity rules ?
CSS specificity rules are the rules that decide which style would be applied onto an element if there is more than one styling assigned to an element. Say there are 3 different CSS rules pointing to the same element, then the browser does some internal calculations (using these specificity rules) and finds out which is the most specific rule and applies that on the element.

There is something called the specificity hierarchy that determines the working of these specificity rules and in the calculation of the most specific rule.

Specificity based on where the rule is written
One of the initial deciding factors of which rule would be applied is the place where the css rule has been written.

As we know we can write CSS rules in an external file, in the same HTML file or even inline with the element. Each of them have a different weightage and also, when two conflicting styles are written in the same place then browser checks for the order of the rules written.

Regarding the place where the CSS rules have been written you need to keep two things in mind ->

inline styles > Both external and internal styles
Styles written lower in order have precedence over the styles written above

So, the first one is pretty evident. Styles written inline would be given more value than the styles written in an external file on internally in the head of the HTML file. The competition between the external and internal files boils down to which is loaded later. If the inline styles are written after the loading of the external file, then they will take precedence and if the external file is loaded after the inline styles in the head , then they will take precedance.

A thing to remember though is inline styles beat both of them no matter where the external file is loaded.

CSS precedence order inside the same file
Another point that might come to your mind is what if two conflicting styles are written in the same file (or internal styles) ? Then what would be the precedence for them ?

Well, as it turns out when there are two CSS rules that are written in the same file and are conflicting, then the rule written below would win (given their specificities are equal, which we will discuss in the next section).

CSS specificity rules
Now we come to the main part of the article. A discussion on what CSS specificity rules are and how they govern the styles being implemented on the elements.

id’s > classes > tags

This is the rule of thumb when it comes to specificity rules. Think of it this way – tags are given the least value as they are considered the least specific, then classes which are considered more specific than tags in the DOM and then the ID’s which are considered the most specific.

The concept of more specific and less specific can be thought of as which would you use to point an element – a div tag or a div tag with class “abc”. Obviously there would be lesser div tags with class “abc” than just general div tags , therefore we say that classes are more specific than tags as they allow us to pin point an element more than just a tag.

Same is the comparison between IDs and classes. It’s just a question of which one allows us to point to an element more precisely.

Also, if there are just tags or just classes , then what happens is that we consider the CSS rule with more number of tags/classes as more specific.

Let me give you some examples for you to understand.

In this case, what will happen is style 1 would work on all those paragraphs which are not inside a div whereas style 2 will override style 1 for all the paragraphs inside divs. Why? Because we are being more specific here – we are saying that we want to implement style 2 on the paragraphs which are inside divs and not just paragraphs in general.

I hope you get my point, giving more nested tags means more specificity, same is the case with classes, more classes means more specificity.

One of the misconceptions that certain people have is that they think that tags are worth say 1 point, classes worth 10 and IDs worth 100 , I’ve even seen specificity calculators(will discuss later) say the same thing but this couldn’t be far from truth. Actually, even if 100 tags compete against a single class , the single class rule will override them. That’s it.

There is no distribution of points as such. IDs beat classes and classes beat tags.

!important
There is another thing called !important which when added to a CSS rule will override basically everything (except other !important). This important thing is certainly not recommended but if you see it somewhere , just assume that it will just override all your styles.

Specificity calculators
Actually, even I did not know that such things exist before I started researching for this article. These are online tools where you can just put in two or more CSS styles and they will tell you which one of them will take precedence over the other. Pretty neat, eh ? I don’t think so personally 😛
You can google specificity calculators and many of them will pop up. Check this one out if you want to -> https://polypane.app/css-specificity-calculator/

It’s okay if someone wants to use them but I think as devs we should have a knowledge about CSS specificities in general.

If you want to know the best resources to learn CSS then I think you’ll find this article helpful -> https://easyontheweb.com/5-awesome-css-resources/