Day 52: declaring multiple layer lists

posted on 06.12.2022

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.

On day 46, I’ve explained how you can order layers by defining them in a comma-separated list first. The first layer in the list has the lowest priority and the last layer the highest.

@layer base, components, theme, framework;

You can create as many lists as so you want, but the important thing to remember is that layers are stacked based on the order in which they first appear. If you define one layer in multiple lists, only the first appearance of that layer matters.

@layer base, components, theme;
@layer framework, base, components;

@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;
  }
}

Although components is the last layer in the last list and therefore should have the highest priority, the color of the border is blue, as defined in the framework layer. That’s because base and components have already been defined earlier.

@layer base, components, theme;

@layer framework, ~~base~~, ~~components~~;

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

Day 52: declaring multiple layer lists

Further reading