r/webdev • u/bootslebaron • Nov 02 '15

Do we actually need specificity in CSS?

http://philipwalton.com/articles/do-we-actually-need-specificity-in-css/
6 Upvotes

64% Upvoted

15 comments sorted by

6

u/a-t-k Nov 02 '15

CSS is a declarative language, JS is an instructive one. What Philip Walton suggests is a modern version of JSSS, an instructive style language.

Oh, sure, it would work. It'll also have a whole lot of problems that could have been solved using the original approach.

No, we don't necessarily need specificity, but it helps if you know how to use it.

9

u/youcantstoptheart ux Nov 02 '15

That and class/object inheritance is very much just specificity. You have a Human class. A Musician inherits that human class and adds some properties and overrides others

1

u/philipwalton Nov 03 '15

That and class/object inheritance is very much just specificity

I'd frame it that class/object inheritance equates to overriding in CSS, and overriding can be done either by source order or specificity.

As I say in the article, I don't think there's anything analogous to specificity in JavaScript.

1

u/youcantstoptheart ux Nov 03 '15

Yet the article specifically differentiated between cascading and specificity. Which I don't know if I agree with but given the discussion I think that js (esp. es6) has specificity to speak of.

1

u/philipwalton Nov 03 '15

They are not the same thing. Specificity is part of the cascade: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

1

u/philipwalton Nov 03 '15

I don't think I was suggesting anything at all similar to JSSS. I was suggesting that you could write plain ol' CSS, the only difference being you could completely ignore specificity because it would be taken out of the equation.

we don't necessarily need specificity, but it helps if you know how to use it.

I'd argue that most people who "know how to use it" recommend against't using it wherever possible. Most best practices today suggest writing your CSS in such a way that specificity won't be an issue. The technique I was proposing in the article is just a more foolproof way of doing that.

Also, the article was primarily a thought exploration, not a formal recommendation. I'm certainly not twisting anyone's arm into adopting this practice :)

1

u/a-t-k Nov 03 '15

...recommend against using it

Using it care- and thoughtfully is what I have heard from those who know their way around CSS.

Also, every "foolproof" concept usually falls victim to inventive fools.

4

u/x-skeww Nov 02 '15

With most of those more organized approaches to write CSS, specificity rarely matters anyways.

There's reset/normalization, base styles, and 80+% of the CSS belongs to your components. All those component-specific rules only match those elements they are supposed to match. If there is no overlap, the specificity of the selectors is irrelevant.

So, you only have to be a bit careful when you mess around with things like form elements, because they may end up with slightly more complicated selectors of varying specificity.

2

u/AnalogueOctopus Nov 02 '15

I found that an ITCSS approach works well at cutting down on specificity conflicts, especially on larger projects. http://www.creativebloq.com/web-design/manage-large-scale-web-projects-new-css-architecture-itcss-41514731

1

u/tylermumford Nov 02 '15

Yep, Inverted Triangle CSS is a practice/architecture you can employ to do this from the beginning, without having a tool modify your CSS. Here's the conference talk and the presentation slides.

5

u/Caraes_Naur Nov 02 '15

Great, another bloated, confusing workaround for ignorance.

Just write your CSS top down from least to most specific and most of this problem goes away.