CSS @scope
Keep selector conflicts to a minimum
The new @scope
rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.
I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.
I think some of the new features that we’ve been working on at the CSSWG also help to clarify aspects of the system that may have been unclear. For example, Cascade Layers call attention to other aspects of the cascade – like style origins and importance.
The more we teach those hidden CSS features to developers, the easier it is to understand how and why CSS works the way that it does.
Keep selector conflicts to a minimum
The new @scope
rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.
A new proposal for importing from NPM packages in Sass
UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g. @use "pkg:bootstrap"
.
Giving us control over the cascade
Don’t let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the !important
flag.