Recently, there was a Twitter poll floating around where the user asked their followers a question about CSS specificity . Unfortunately, I was u...
For further actions, you may consider blocking this person and/or reporting abuse
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:
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 :)
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
Joe DuVall
How do you share knowledge?
Joe DuVall
Thank you for the heads up! I've fixed the error so it's linked to the correct resource :)
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 :)
This is an excellent article! Until recently, I had been extensively using
!importanton 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 link: cld.wthms.co/Y8ORoK
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...
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!
Nice post, emphasizing to remove
!importantwhere 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.Great post Muna! Was this tweet by @mxstbr the one you’re referring to?
Thank you Ben, that means a lot :D! Yes, that's the one! I bookmarked it on Twitter but couldn't find it anywhere!
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 :)
Thank you Muna, it’s a great post.
Thank you! I'm glad you enjoyed the post! :)
SMACSS allows usage of !important but only to state change like hover or active. I agree with that, it has sense.
Thank you Luis, I'm glad you enjoyed the article! Definitely, it really pays off to learn about specificity.
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.