Som man kanskje allerede vet så har CSS et hierarki på hvordan CSS reglene blir tatt i bruk. Noe av det er rekkefølgen den er skrevet i, ellers kan man lage mer spesifikke regler ved å bruke ID-er eller klasser. Selvfølgelig har man !important om en siste utvei, men visste du at man kan definere rekkefølge og endre på hierariket selv?

Med @layers kan man lage egne lag som man igjen kan bestemme rekkeføkgen på. Dette kan man gjøre ved å først definere rekkefølgen

@layer theme, layout, utilities;

I dette eksempelet vil man lage tre lag, theme, layout og utilities. Regler som overlapper fra utilities vil ha presendens over de som er i de to første lagene, og så videre.

Det som er viktig å merke seg at regler som er definert utenfor et lag har høyere viktighet enn regler i et lag. Så i følgende eksempel vil tekstfargen fortsatt være lilla, selv om regel inne i laget er mer spesifikk.

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    color: green;
  }
}

Det er med andre ord fortsatt viktig å være klar over hierarkiet av viktighet når man jobber med lag, men det gir deg litt mer frihet til å definere CSS uten å nødvendigvis tenke på rekkefølgen i fila.

@layer har god støtte i alle nettlesere!