Day 46: ordering layers

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.


By default, cascade layers are stacked in the order they are defined, but you don’t have to rely on it. You can determine the order in one place.

In the following example, the border color of the paragraph is first red, then blue, then rebeccapurple, and finally green.

@layer base {
p {
border: 10px solid red;
}
}

@layer framework {
p {
border-color: blue;
}
}

@layer components {
p {
border-color: rebeccapurple;
}
}

@layer theme {
p {
border-color: green;
}
}

Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.

You can change that order by defining layers first in a comma-separated list, starting with @layer.

@layer base, components, theme, framework;

@layer base {
p {
border: 10px solid red;
}
}

@layer framework {
p {
border-color: blue;
}
}

@layer components {
p {
border-color: rebeccapurple;
}
}

@layer theme {
p {
border-color: green;
}
}

Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.

The order of appearance of the @layer blocks doesn't matter any more, the order in the @layer list does. The border color of the paragraph is now first red, then rebeccapurple, then green, and finally blue.

Oh, and of course, if you add unlayered styles, those still win.

p {
border-color: hotpink;
}

@layer base, components, theme, framework;

@layer base {
p {
border: 10px solid red;
}
}

@layer framework {
p {
border-color: blue;
}
}

@layer components {
p {
border-color: rebeccapurple;
}
}

@layer theme {
p {
border-color: green;
}
}

Bartender, I got me a bet for you. I'm gonna bet you $300 that I can piss into that glass over there and not spill a single, solitary drop.

See on CodePen.

Further reading