CSS Specificity — An overview
About rules and stuff
This time, I was learning SASS to make my first-ever beautiful frontend project alive. Sure, you can go ahead and take a look at what I build after consuming 5 days 17 hours 34 minutes and 43 seconds on the project. One thing that I learned after finishing the project last night was you gotta organize all the files in a good manner and also, start following some rules. After I did that, I found the webpage load fast, my development workflow clean and to-the-point. So, if you want to achieve the same, then read along, there are some specific rules which you should follow!
CSS Specificity. “What specificity?”
Yeah, when I learned first about this, I thought the same. I told you in one of my articles here that CSS has become so advanced that it is now as beautiful and powerful as JavaScript. Let’s not go into that, if I were to follow MDN’s definitions, then they say:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
In general, CSS Specificity is the set of rules applied to the CSS selectors in order to determine which style should be applied to an element. Sweet. What about the ‘specifics’? Well, if your style is more specific than the others for the same element, then that rule(s) will be applied. To better understand this, let’s take an example. Suppose you applied certain ruleset to an element of your HTML code for your own portfolio website, you refresh the webpage and…boom! You don’t see that change! Woah, why so? After you’re done double checking any possible silly mistake you did, you’ll find out (after scratching your head multiple times) that in the developer tools of the browser, that rule was not applied. Something like o̵v̵e̵r̵f̵l̵o̵w̵-̵x̵:̵ ̵h̵i̵d̵d̵e̵n̵;̵
The most probable cause in such cases is the specificity. Now is the time for you to understand how those rules are applied in the actual scenario…
“Okay, but how it will help me?”
If you love organizing your code, well, you’ve got your best bud! You can clearly see when you start styling your elements (especially when you have tonnes of them) it’s kind of messed up. I mean, just look at this:
This already looks horrible even when the card__details class style properties are incomplete. One great way to combat this is to adopt the Block-Element-Modifier (BEM) methodology. This is what professional developers use particularly to ensure that your styles and their naming don’t override each other.
CSS Specificity also ensures you to apply that CSS code which is exactly necessary to your elements. This, in turn, results in a cleaner and comparatively less code. 😌 If code maintainability is your goal in one of your next project, then go for the specifics!
Well, you’ll love writing CSS code (again!) once you follow the BEM method and use specificity. Just give it a try 😉
“Nice! How do I even know the specificity?”
A specificity number is actually a weight that is applied to a given CSS declaration. In general, we use three selector types to calculate, these include:
- Type selectors:- this selects the HTML elements by its node name. Example: the
<a>in your markup and thea { /* your styles */ }in the stylesheet. - Class selectors:- this, as the name suggests selects the class of the element from the markup. So, in the above card example, we have
.card__detailsa class of an element. - ID selectors:- it selects the particular ID from the markup. This is differentiated by a hash (
#) sign in front of the ID name in CSS.
As for the precedence of the above selectors, it goes like this:
| Style attribute ▶️ ID selectors ▶️ Class selectors ▶️ Type selectors |
I’ll assume you know what a style attribute is beforehand (Hint: inline style 👀). Hence, from the above precedence rule, we understand that the style attribute has the highest and the type selectors have the lowest specificity. Now, to actually calculate the specificity, let’s denote each of the above precedence rule components an initial value of zero (0). Therefore, they become something like this: 0, 0, 0, 0
- For the style attribute, it automatically overrides all its other competitors as it sits in the highest priority. So, we replace 0 with 1 in the above rule. Here’s the corresponding example for a style attribute:
- For the ID selectors, we now have to replace the zero from the second place which denotes the ID selectors.
- Same for the class and type selectors. Now you already know what to change. Here the values will be 0,0,1,0 and 0,0,0,1 respectively.
Now, let’s dig in more with a real-world example. Let’s say you have an unordered list item in your markup i.e.:
And you aim to add a particular color to your list items via CSS. There can be following two approaches which you can use:
Which one of the following two selectors you think will actually execute while it appears on your browser? Yes, the one with the highest specificity! It’s time to calculate the specificities of the above two selectors.
- For the first selector, we just have two type selectors, i.e,
ulandliand no other of the remaining three (style, ID and class). Hence, it’s specificity will be 0,0,0,2. Note that the number is not ‘1’ this time in the type selector place, we have two elements now that’s why it will be written as 0,0,0,2 and not 0,0,0,1. - The second selector uses two class names instead of any type/style/ID selectors. Therefore we have 0,0,2,0 as its specificity value.
As you might’ve guessed, the second selector wins because it has a higher specificity value even when the value ‘2' was common in both the cases. Okay, this was easy, how about if we have two specificity values like 0,1,1,2 and 0,0,2,1? Well, in that case, the first selector will be prioritized against the second one having ‘1’ as its type selector value. This is simply because it uses the ID selector! Can we take it even further? Alright! What about:
- The type selector having 0,0,0,1 specificity value.
- The ID selector having 0,1,0,0 specificity value.
- The class selector having 0,0,1,0 specificity value.
- The second type selector having 0,0,0,1 specificity value.
- The pseudo-class having 0,0,1,0 specificity value.
What will be the total specificity value of the above selectors? It’ll be 0,1,2,2. It’s cool to note that the pseudo-class behaves same as the normal class selector here.
Where to next? 🤔
Did you enjoy learning some of the CSS Specificity basics? I hope you did and it would be even more enjoyable if you actually implement the same on your projects or even if you just try to understand it when some CSS stuff doesn’t work, it’ll be a great workaround. Remember, the goal is to write an organized and optimized code 😉
Specificity doesn’t stop here, it was just an overview of what I wrote above. Below are some of the other links where you’ll find a whole lot of specifics!
Liked this story? Feel free to clap and motivate me to write more and better. Did I miss something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurston Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
