undefined | Better HN

0 pointstaeric2y ago0 comments

Basically this is my argument for the self inflicted pain of CSS. Worse than

  main section p {...}

is when you have people start with stuff like

  p {...}

and then they start to have all sorts of woes when they realize they don't have any way to specify this particular paragraph is the one they meant. So then you end up with people being forced to use nth child selectors to hit the intro paragraph.

Then they start to think, "I want the first section to be the abstract." But should they add an "h" element to use the header to indicate a new section? Or should they make a giant container div to do the same? Why not both for different reasons throughout the same app? :D

0 comments

danShumway2y ago

Exactly! Zero argument on this, you are completely correct.

I do think escape hatches are important, so I'm not going to say that CSS shouldn't support referring to element types directly, that would be way too far for me to go. But...

I generally don't use direct element selectors at all when I write CSS now, and I think that teaching people to start with stuff like p {...} causes just so many problems for exactly the reason you're talking about. People are drawn to it because of that idea of everything being semantic, but styles like BEM are not any less semantic, they're arguably way more semantic because when styling you're now thinking about what an element is, not where it's positioned relative to other elements. And you get to say what an element is and what its purpose is publicly in giant capital letters in the class name that anyone can read.

Honestly, maybe I deserve a little bit more of a self-callout here because I've been kind of dismissing some of the annoyances and thinking, "this isn't that bad, you're just saying what a component should look like, yes there's concepts to learn but it's not like CSS rules are harder to learn than something like Rust" -- but part of that is me forgetting that it is significantly harder to just "say what a component should look like" when there are 5 CSS files all referring to the same elements, and so changing a rule suddenly doesn't take effect because some other CSS rule is more specific, and then changing anything suddenly breaks a completely separate part of the page over someplace else because it shared a selector.

It's like taking a function and arbitrarily splitting it across 5 different files with no rhyme or reason about which lines go where, and there's no way except by tracing the function to figure out which lines of code are ever getting called. And that's the default way that most people are taught to write CSS.

People went wild over scoped styles with web components, and to be fair scoped styles are really nice, but I never felt like they were essential for any of my projects. But if I wasn't using BEM and if I wasn't thinking about my styles as being attached to components even for completely static documents with no Javascript... yeah, scoped styles would probably be a lot more important to me :)

j / k navigate · click thread line to collapse