There’s a new factor coming in CSS: @layer. As with all new issues, it takes time to actually wrap your head round it. And regardless of me tapping at my keyboard about it, full disclosure, I’m undecided my thoughts is totally there but. Fortuitously, good individuals are on the case!
This comes from Miriam Suzanne, who is de facto on a tear with influencing essential new CSS stuff. I’ve been listening to about all this, however then all of the sudden it simply dropped in experimental browsers:
✨ Now you can play with Cascade Layers in two browsers (behind flags):
Something selectors in 2.css will “win” over selectors the identical specificity as one thing in 1.css. I believed CSS layers was a option to management that with no need to alter the supply order of these stylesheets in HTML. So, irrespective of the place you load a reset stylesheet, you may kinda notch down the significance of it by kicking it to an earlier layer. Or, irrespective of the place you load an overrides stylesheet, you may kick it up.
I believe that sort of factor is perhaps coming nonetheless, however the precise idea of layers is rather more highly effective than I first imagined.
With Cascade Layers coming, we builders can have extra instruments obtainable to regulate the Cascade. The true energy of Cascade Layers comes from its distinctive place within the Cascade: earlier than Selector Specificity and Order Of Look. Due to that we don’t want to fret in regards to the Selector Specificity of the CSS that’s utilized in different Layers, nor in regards to the order wherein we load CSS into these Layers — one thing that can are available in very useful for bigger groups or when loading in third-party CSS.
That’s the rub right here: it is a new factor that impacts which selectors win. It’s going to require some re-wiring of our CSS brains, as a result of layers is that this solely new (and highly effective) a part of figuring out what types really get utilized.
I say highly effective as a result of a “larger” layer can actually beat a historically stronger selector even with a weaker selector within the layer.
Miriam’s help demo makes this clear in a couple of traces:
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.