CSS Specificity Rundown
CSS really is fun.
No, seriously. I’m not being sarcastic here.
Even though I’ve been in software a long, long, long time, I hadn’t really studied CSS before last year (shocking, I know) and so I’ve been behind in my training.
I had an opportunity to dive in more, and all was going well until I started playing with media queries and ran into a specificity problem that wasn’t so obvious (to me, though it may have been to you).
So, to help people who are treading the same path, here are some aids on specificity:
- W3 Schools has a fun “try it and learn” approach to general CSS Specificity
- Saucelabs specifically breaks down specificity and media queries
- Halodoc provides some best practices to avoid troubles.
- Specificity with Darth Vader and Stormtroopers and stuff at smashing magazine.
These should get you past the worst of your troubles nicely. If you do get stuck, then it’s always nice to experiment with a local HTML/CSS document or maybe fire up a REPL.IT instance for HTML, CSS, and JS. It’s all fun.
PS: Because we need it so often, here is a CSS Selector Cheat Sheet.
- Specificity with Darth Vader and Stormtroopers and stuff at smashing magazine.
- Halodoc provides some best practices to avoid troubles.
- Saucelabs specifically breaks down specificity and media queries