DEV Community

CSS Specificity and the use of !important: a case study

Muna Mohamed on October 14, 2018

Recently, there was a Twitter poll floating around where the user asked their followers a question about CSS specificity . Unfortunately, I was u...
Collapse
 
malgosiastp profile image
Malgosia • Edited

I really like that you've emphasized that reading about specificity makes you review your own project and try to remove the !important quick fix solution from your project.

I'm now struggling with some legacy codebase where applying !important was the first idea to fix any problem, as investigating (especially because it involved third-party libraries with its own styles) was really time-consuming and quite hard.

And I'm wondering what is the best way to pass the knowledge and good practices about specificity to other developers in the team just to make them see the fastest solution is not the best because finally it could end up like this:

Ice Age cartoon fragment. Scrat trying to plug water leaks
Ice Age cartoon fragment. Scrat lose the fight with water leak

Keep up good work promoting learning about specificity instead of sticking to !important :)

PS: I think you've misspelled the resource of Mandy Michael. If wa talking about the same thing the project name is Batificity, and the link probably suppose to lead to batificity.com, not MDNsite :)

Collapse
 
munamohamed94 profile image
Muna Mohamed • Edited

Hi Malgosia, I'm glad you enjoyed the post! Thank you so much for sharing your experience, it really puts it into perspective the repercussions of using !important as a fix, particularly on legacy codebases where resolving the problems that arise with the overuse of !important can be tedious and very time-consuming.

I'm sorry to hear that you have the difficult task of correcting the mistakes of your predecessors and wish you the best of luck.

That is a perfect GIF to describe the impact that abusing !important can have on codebases! With regards to the best ways of passing knowledge and good practices to your team, I came across a really good post by

joefuzz image
, who had a similar struggle and the DEV community shared their experiences and gave some great tips and advice on solutions for this very problem. I really recommend giving it a read!

Thank you for the heads up! I've fixed the error so it's linked to the correct resource :)

Collapse
 
malgosiastp profile image
Malgosia

Awesome thank you :)

I think it's not only my struggle, there is a lot of projects like this :D

For me actually, it's not only about fixing it but what's more important for me - introduce good practices and teach my team members about the importance of avoiding !important :D and of course so they are convinced about this not only do it because someone asks :)

Really appreciate the article :) For sure will help me :)

Keep up spreading good CSS practices :)

Collapse
 
arunsathiya profile image
Arun • Edited

This is an excellent article! Until recently, I had been extensively using !important on my code as well and one of my colleagues taught the importance of using specificity.

A quick tip that helps me a lot when I want to target a specific element for writing CSS, is to right-click on that element's HTML element on the browser dev tools, and then use Copy -> Copy selector.

For example, in the image attached below, it gives me this CSS selector: #article-body > p:nth-child(43)

This feature on the browser has helped me numerous times when I want to target specific elements strictly.

Image showing how to target an element's CSS selector using browser dev tools
Image link: cld.wthms.co/Y8ORoK

Collapse
 
moopet profile image
Ben Sinclair

That's a useful trick... but in your example it's only useful if the page content or theme never changes, because you can't guarantee your highlighted paragraph is going to be the forty-third forever...

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Arun, I'm glad you enjoyed the post! I was the same, using !important excessively but no more! Once you learn about specificity and !important, it makes it difficult to willingly use it without thinking twice about it.

Thank you for the tip - I haven't used that feature before but I can definitely see its uses!

Collapse
 
gerreth profile image
Gerret Halberstadt

Nice post, emphasizing to remove !important where possible (and almost everywhere it is) is a good point. But how about dealing with specifity in your case from the other side? Instead of increasing the specifity in the media query you could reduce it in the former part. This would have the same effect and increases the readability. Seeing two nested id selectors always looks suspicious to me.

Collapse
 
ben profile image
Ben Halpern • Edited

Great post Muna! Was this tweet by @mxstbr the one you’re referring to?

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Ben, that means a lot :D! Yes, that's the one! I bookmarked it on Twitter but couldn't find it anywhere!

Collapse
 
ssimontis profile image
Scott Simontis

I would encourage you to take this a step further and eliminate ID-based selectors from your CSS. Their specificity makes them very difficult to override without getting obnoxiously specific in your overrides, so you end up with some really ugly (and brittle) selectors that you end up fighting. I personally try to never write a selector that has more than three discriminators in it, because it makes CSS more reusable, but I must also admit I don't write very much CSS because the backend is my natural habitat :)

Collapse
 
tomkince profile image
Tomkins • Edited

Thank you Muna, it’s a great post.

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you! I'm glad you enjoyed the post! :)

Collapse
 
pgrab86 profile image
Paweł Grabowski

SMACSS allows usage of !important but only to state change like hover or active. I agree with that, it has sense.

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Luis, I'm glad you enjoyed the article! Definitely, it really pays off to learn about specificity.

Collapse
 
benkressdesign profile image
Ben Kress

Great article! I try not to use it in any of my code... Except some times it is !important for JavaScript interactions to override certain things. But, for the most part, it isn't necessary.