Home Digital garden Cascade layers

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 */
/* 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">