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 did a live Q&A at SitePoint talking about:
To be clear: now that we have border-box sizing, grid math can be much simpler. Complex math is only required if you are using margin-based gutters. Move your gutters into padding, and the math is simple. That’s why I don’t use Susy (or any grid system) much any more.
percentage(1/5)
works great in Sass - and flexbox takes care of the rest.
You can read a summary of the conversation as well – but it leaves out some good bits. ;)
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.