What the Heck Is CSS Specificity?

And that, my kids, is why CSS sucks. Cascading is the most stupid "feature" ever. Just imagine that we could've had classes with inheritance instead, which would reduce time spent on debugging the selector mess it is now; browsers would also parse the styles much faster. And then we could build modules or components, themes and frameworks on top of that. Add a semantic constraint engine with parametric styles (so I can say if I want two elements to align in some way), support for calculations, and coding CSS would be fun instead of frustrating. One can dream, I guess...<p>A much better rant on CSS general sulkiness: <a href="http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-sucks/" rel="nofollow">http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-...</a>

To avoid too much hassle, I once decided to only use classes. So instead of having #header, #nav and #footer, I had .header, .nav and .footer.<p>When learning CSS, we're told to use id's whenever we're targeting a unique element that isn't meant to repeat itself, hence the #header. So we apply this rule without looking too much into it, thinking it's wrong to use a class for unique elements like that, when it's actually not.<p>You just lose some readability in distinguishing unique elements from repeated ones, and you need to avoid using the same unique element twice. But ultimately your styling works the way you expect it to, and leave id's for anchors and JavaScript.

The 10-100-1000 factor is in a large base, shown recently in most browsers to be base-256. <a href="http://news.ycombinator.com/item?id=4388649" rel="nofollow">http://news.ycombinator.com/item?id=4388649</a>

This is one of the last things I figured out when I was learning CSS, but it's arguably one of the most important. Once you realize that it exists, all of a sudden any new CSS you write will shrink and you'll understand all those weird quirks you were seeing but not understanding in your giant stylesheet.

Here's a nice poster demonstrating CSS specificity with fish. <a href="http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf" rel="nofollow">http://www.standardista.com/wp-content/uploads/2012/01/speci...</a>

&#62; h2::first-line<p>…I've never seen this notation. I've always seen pseudos with just one colon.<p>Some quick testing in Textmate reveals that this does, indeed, work, as does the single colon I've always been using. Triple colons don't work.<p>And this only works for pseudo <i>elements</i>; pseudo <i>classes</i> only work with single colons.<p>At least in Webkit; I didn't bother checking my simple test-case in Firefox, Opera, or IE.<p>Huh.

On a similar note, I'm currently in the planning phase of building a "specificity calculator" as a bundle for TextMate. It will mostly be targeted towards complicated CSS files and the people who create them but I imagine it will also be helpful for people new to CSS. Would any of you guys have interest in such a bundle?

Specificity PSA: Don't use !important unless you absolutely, positively have to.<p>Recently I've run into WordPress themes where the author doesn't grasp the cascade and resorts to using !important. Widgets embedded on third-party sites are about the only good use I've seen.

"Elements can never beat a class selector, even if you pile them on"<p>Uhh.. what about classes? Can you pile classes on to beat ids?<p>Can you pile ids to beat inline? (Well that kinda doesn't make sense).