Day 52: declaring multiple layer lists

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.

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

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS