Cascade layers

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

<linkrel="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