The BEM approach in all is craziness is basically an attempt at scoping. And then tailwind too is trying to solve many if the same problems, from the opposite direction. In both cases people end up using their component frameworks and JavaScript libraries to build new abstractions atop the hacks to try and scope css, and the pile grows.
Real scoped css with @scope has actually landed in latest Chrome and Safari, but Firefox are dragging their feet.
That's an interesting way of saying "Firefox is not backed by an unlimited pile of cash"
I personally think they are vastly underestimating the enormous potential upside for the whole Internet if devs can make style changes with confidence, and frameworks like Vue and Svelte don't have to keep bolting on bespoke, expensive JavaScript-based approximations.
.page1-card {
border-color: green;
}
.page2-card {
border-color: red;
}So you can cut holes in the selectivity, for say, letting blog post content have its own styles. That's the biggest advantage. There's also some minor utilities it's got, like not impacting selectivity and such, but it is one of those features that will have to see widespread use to actually grow an understanding of all it's intricacies
I actually find this really obnoxious. Its super common to want a child component to change styles based on the parent component its wrapped by, sometimes far up the tree. The only way to do this is prop drilling to pass a class, or start putting vanilla selectors everywhere the parent can target. I don't really see the usefulness. CSS isn't naturally isolated like that.
Passing props or using state is the way to tell a child component to dress differently, even though it sometimes gets burdensome. Anytime I tried using global styles, at some point something went haywire I didn’t account for. On the other hand, for styling HTML generated or fetched from somewhere (e.g. CMS content, rendered Markdown), it’s obviously necessary.
I am starting to tolerate CSS as a set of style properties, but I still hate CSS as a stylesheet files with various rules with unclear dependencies. Very quickly they become extremely brittle. It is also hard to modularize them in any sensible way. Unless your web app is one SPA with one set of CSS files any change is risky and may affect multiple pages in surprising ways.
I don't use svelte much, but Vue, Lit, and Surface all have the same css scoping stuff too, and it's wonderful.
[1] https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...