4 ms·

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

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. https://developer.chrome.com/docs/css-ui/at-scope https://developer.chrome.com/docs/css-ui/at-scope https://github.com/mozilla/standards-positions/issues/472 https://github.com/mozilla/standards-positions/issues/472

ape4 3y ago
TIL about that - great. Of course, there is the poor man's scoping: .page1-card { border-color: green; } .page2-card { border-color: red; }
hellcow 3y ago
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.
- paradox460 3y ago
  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
airstrike 3y ago
> 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"
- montroser 3y ago
  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.

ape4 3y ago

TIL about that - great. Of course, there is the poor man's scoping: .page1-card { border-color: green; } .page2-card { border-color: red; }

hellcow 3y ago

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.

paradox460 3y ago
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

airstrike 3y ago

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

montroser 3y ago
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.