Day 46: ordering layers

posted on 28.11.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.

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

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

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

See on CodePen

Further reading

• Day 37: cascade layers
• Day 40: unlayered styles
• Day 43: grouping layers
• Day 49: layering entire style sheets
• Day 52: multiple layer lists
• Day 55: anonymous layers
• Day 58: ordering nested layers
• Day 64: the revert-layer keyword
• Day 68: cascade layers and browser support
• Day 74: using !important in cascade layers
• A Complete Guide to CSS Cascade Layers

Overview: 100 Days Of More Or Less Modern CSS