One thing I’ve really liked about using Svelte is that it’s nudged me towards using plain CSS. Since styles are component scoped it’s allowed me to just focus on applying them in the small, which I think reduces some cognitive load for me. And I’ve been surprised at how much I enjoy solving problems with pure CSS.
Yeah, scoped css is key to reducing all sorts of complexity.
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.
It's not an issue of having the resources to implement the spec -- it's that they're not convinced of the value of the feature, especially given it has the potential to impact performance.
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.
Sorry for being dense, but what’s the difference between this and nested styles that just landed in every browser? I still scope my styles to a particular selector in either case.
Scoping let's you define an upper and a lower boundary
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 don't know how it works in Svelte, but react+MUIv4 (makeStyles) is effectively component scoped as well, in that your selectors will have a random prefix generated unique to each component.
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.
From my experience, this is a natural reaction at first, but there aren’t that many use cases that warrant global styles when you’re working in a component-oriented framework.
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 disliked it at first too but now I consider migrating to such solution.
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.
Author of the blog post here. I've felt the same way. I wrote a big article griping about tailwind[1] earlier this year, that was somewhat controversial here on hn, but the feelings extend to other bolted on attempts to "fix" css throughout the past.
I don't use svelte much, but Vue, Lit, and Surface all have the same css scoping stuff too, and it's wonderful.
We write Lit at work, same story though. I almost never even use classes anymore because my JS and CSS is scoped. `foo-card`? Nope, `article > div > span`.
