Auto Light Dark Light moss Dark moss
Home Digital garden Cascade layers

Cascade layers

Budding

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