Doug Waltman

CSS Specificity

I thought it would be fun rewrite "The Bare Necessities" song from Disney's "The Jungle Book" to be about CSS specificity. When I tweeted about it, a friend challenged me to follow through with the idea. I give you "CSS Specificity", a parody song:

Look for the specificity
C-S-S specificity
Forget about your bang important strife
I mean the specficity
When all your styles are cascading
Weight brings the specificity to life

Whenever I ponder, whenever I code
I shouldn't wonder about every node
Inline styles are the most heavy
Followed by hashtag your id
Then basic and pseudo-elements
Not to mention those tags adjacent
Then maybe try a few

The specificity will render in your view
Refresh your view!

Look for the specificity
C-S-S specificity
Forget about your bang important strife
I mean the specficity
Selectors, class names, and IDs
Weight brings the specificity to life

Now when you add a ruleset
Or poorly declare
Not the heaviest set
Next time beware
Don't put the ruleset before your reset
Put sets therafter
Although your best bet
Is making sets more specific
When you put child sets before parent sets
Have I given you a clue?

The specificity of styles will come to you
Refresh your view!

So just try and recall, heirarchy
Fall inline with your styling
'Cause let me tell you something front-end coders
If you overwrite your rules, uh uh
You're working too hard

And don't spend your time lookin' around
For something you styled that can't be found
When you find out you can't code without it
And go along tinkerin' around it
I'll tell you something true

The specificity of styles will come to you