Coming up with a layer stack
My current layer setup:
@layer reset, vars, base, blocks, utilities;
Miriam Suzanne shared this one in her CSS-Tricks article:
@layer reset, default, themes, patterns, layouts, components, utilities;
And this one in her article “A Whole Cascade of Layers”:
@layer spec, browser, reset, default, features, layout, theme;
Though, as she mentions, spec
and browser
aren’t actual layers she’s creating, they’re fundamental to the web.
So it’s something more like this:
@layer reset, default, features, layout, theme;
Ways to create or put styles into layers
Formal syntax
@layer [ <layer-name># | <layer-name>? { <stylesheet> } ]
WTF does that mean though??
Okay, let’s break it down
@layer [
/* 1 or more layer names */
<layer-name>#
/* OR */
|
/* 0 or 1 layer names with styles */
<layer-name>? { <stylesheet> }
]
Basically, these are the ways you can use @layer
:
/* 1 layer name */
@layer layer-name;
/* More than 1 layer name */
@layer layer-name, layer-name, layer-name;
/* No layer name with styles */
@layer {
.foo {
baz: bar;
}
}
/* 1 layer name with styles */
@layer layer-name {
.foo {
baz: bar;
}
}
But wait, there’s more
Don’t forget about importing styles into a layer
@import "foo.css" layer(layer-name);
There’s even been talk of being able to set a layer when linking to a stylesheet
<link rel="stylesheet" href="foo.css" layer="layer-name" />
References
- Improving CSS Architecture with Cascade Layers, Container Queries, Scope, by Miriam Suzanne
- No more specificity issues?! (or all new ones 🤔) - A look at CSS Cascade Layers by Kevin Powell
- CSS Cascade Layers: An overview of the new @layer and layer() CSS primitives by Una Kravets
- Cascade layers on the CSS Podcast
- Getting Started With CSS Cascade Layers by Stephanie Eckles
- The Future of CSS: Cascade Layers (CSS
@layer
) by Bramus Van Damme - The CSS Cascade, a deep dive by Bramus Van Damme