What the Heck Is CSS Specificity?

http://designshack.net/articles/css/what-the-heck-is-css-specificity/

by codingthebeach • 14 years ago

55 20 14 years ago

dalys• 14 years ago

Here's a nice poster demonstrating CSS specificity with fish. http://www.standardista.com/wp-content/uploads/2012/01/speci...

nickreese• 14 years ago

Pretty solid find. Great for explaining to newbs.

masklinn• 14 years ago

I've always had a soft spot for Andy Clarke's (much older) CSS Specificity Wars poster: http://www.stuffandnonsense.co.uk/archives/css_specificity_w...

mddw• 14 years ago

Clarke's lacks inline style and !important.

Sure, they should be used with care, but !important is actually really useful in responsive webdesign.

jimworm• 14 years ago

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

acabal• 14 years ago

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.

octagonal• 14 years ago

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?

bbx• 14 years ago

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.

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.

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.

dsego3• 14 years ago

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...

A much better rant on CSS general sulkiness: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-...

kevinconroy2• 14 years ago

Just because you don't like a feature or design choice doesn't mean that the entire language sucks. If used right, cascading can be incredible powerful. If used poorly, it's a total PITA.

You could make similar complaints about insert your favorite language/framework here.

If you want to make webpages, you're pretty much stuck with CSS for the foreseeable future. Better to promote best practice rather than writing off the entire language.

dsego3• 14 years ago

You are right. A single feature isn't a reason to think that an entire language sucks. But in this instance we are talking about a defining feature of the language. They're called cascading style sheets for a reason. I know we're stuck with it for now, that's why I'm ranting. My god, this is like PHP in the 90s, if I rant against something, then "I'm using it wrong" or "I'm too stupid and don't understand how great it is". And in the meantime all the CSS "gurus" are teaching people that to centre an element it is perfectly normal to write { left: 50%; width: 400; margin-left: -200px }. Even worse, they squabble over which way to clear floats is the correct one, when the truth is we shouldn't be having to do this in the first place.

olalonde• 14 years ago

For what it's worth, I have used CSS for years without knowing anything about specificity and never had to debug (more than a few seconds) anything related to specificity... If you actually have to use the formula to find out the specificity of a selector, I'd say there's likely something wrong with the way you code CSS.

egypturnash2• 14 years ago

> h2::first-line

…I've never seen this notation. I've always seen pseudos with just one colon.

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.

And this only works for pseudo elements; pseudo classes only work with single colons.

At least in Webkit; I didn't bother checking my simple test-case in Firefox, Opera, or IE.

Huh.

kmontrose• 14 years ago

That's the spec as of CSS3, pseudo elements get ::, pseudo classes get :.

Practically speaking browsers will accept : for everything, possibly forever.

egypturnash2• 14 years ago

I learnt a new thing! And will probably never use it until browsers start being picky about it.

juddlyon• 14 years ago

Specificity PSA: Don't use !important unless you absolutely, positively have to.

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.

ipince• 14 years ago

"Elements can never beat a class selector, even if you pile them on"

Uhh.. what about classes? Can you pile classes on to beat ids?

Can you pile ids to beat inline? (Well that kinda doesn't make sense).

tajddin• 14 years ago

It appears that 256 classes can override an ID.

http://news.ycombinator.com/item?id=4388649

What the Heck Is CSS Specificity?

Related Stories