3 ms·
`@layer` is another recent CSS feature that helps a lot in this space. (I think it's a more exciting feature than Web Components with Shadow DOM.) It makes it e
by WorldMaker 9mo ago
`@layer` is another recent CSS feature that helps a lot in this space. (I think it's a more exciting feature than Web Components with Shadow DOM.) It makes it easier to stack multiple levels of stylesheets from most generic/system-wide to most specific. You can import 3rd party stylesheets not written for `@layer` in mind into specific named layers.
Layers take care of things you'd used to use `!important` to try to hack around much more systematically based on the specificity of the `@layer` the CSS is coming from. (More specific layers override more general ones as if they were more "!important".)
Layers don't entirely save you from naming conflicts or CSS specifiers that are too broad, but Dev Tools give you increasing ways to isolate which layer a conflict is coming from, at least, and that can help you decide on ways to fix the conflict.
I think `@layer` is a closer hint to what the "CSS-native" approach to "CSS modules" is going to start to be than just CSS class munging at compile time.