Cascade Layers?

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:

I had this actually simplistic view of what the plan was with layers. Say you hyperlink up two CSS recordsdata:

<hyperlink rel=”stylesheet” href=”1.css”>
<hyperlink rel=”stylesheet” href=”2.css”>

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.

Depart it to Bramus to actually dig into all this with a improbable submit on all of it:

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.

Bramus Van Damme, “The Way forward for CSS: Cascade Layers (CSS @layer)“

Emphasis mine.

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:

/* layers override unlayered types */
@layer override {
h1 {
coloration: inexperienced;
}

h1::earlier than {
content material: “✅ “;
}
}

/* regardless of the upper specificity */
#h1 {
coloration: pink;
}

#h1::earlier than {
content material: “❌ “;
}

As a result of that CSS on the backside isn’t in a layer in any respect, the layered CSS wins, even with the weaker selectors. Wow.

And also you aren’t restricted to 1 layer. You get to outline them and use them nonetheless you need.

@layer reset; /* Create 1st layer named “reset” */
@layer base; /* Create 2nd layer named “base” */
@layer theme; /* Create third layer named “theme” */
@layer utilities; /* Create 4th layer named “utilities” */
/* Or, @layer reset, base, theme, utilities; */

@layer reset { /* Append to layer named “reset” */
/* … */
}

@layer theme { /* Append to layer named “theme” */
/* … */
}

@layer base { /* Append to layer named “base” */
/* … */
}

@layer theme { /* Append to layer named “theme” */
/* … */
}

Thoughts-blowing, actually.

How are we going to make use of this?

I ponder if a standard sample would possibly flip into…

Not layering our resets, so they’re additional weak.Layering third-party imports at a low degree.Layering any authored types at a excessive degree.

After which not likely worrying if you happen to go away area between the layers as a result of you may regulate layers any time.

Time shall inform.

I wager we’ll see individuals dip their toes with:

/* That is our solely layer. Something in right here wins. */
@layer overrides {
/* … */
}

After which a pair years later:

@layer last {
/* … */
}
@layer final-final {
/* … */
}
@layer final-final-v2 {
/* … */
}
@layer final-final-final-last-complete {
/* … */
}

Debugging

I hope DevTools expresses layers actually clearly as a result of there’s going to be some severe head-scratching for some time once we see weaker-looking selectors successful due to layer placement.

Browser Assist

Appears to be like like caniuse is on the ball right here!

The submit Cascade Layers? appeared first on CSS-Tips. You’ll be able to help CSS-Tips by being an MVP Supporter.