Con l'introduzione della regola @layer, la gestione degli stili in CSS diventa più organizzata e modulare. Questa regola permette di descrivere un layer esplicito, a cui assegnare un set di regole CSS, siano importate da url o scritte in blocchi.

/* Definizione di un layer reset */
@layer reset url(reset.css);

/* Definizione layer esplicito */
@layer typography {
  h1, h2 {
    line-height: 1.2;
  }
}

Il nostro compito ora è stabilire l'ordine con cui ogni layer verrà valutato dal browser. È importante definire l'ordinamento prima una qualunque definizione di layer, sia esso importato o un blocco di codice.

/* Ordine di importanza dei layer */
@layer reset;
@layer typography;
@layer my-layer;

/* Sintassi abbreviata */
@layer reset, typography, my-layer;

I vantaggi di questa tecnica sono indiscutibili: permette di ridefinire uno stile CSS indipendentemente dal punto in cui esso è stato definito, come nell'esempio seguente.

@layer reset, typography;

@layer typography {
  h1, h2 {
    line-height: 1.2;
  }
}

@layer reset {
  h1, h2 {
    color: blue;
  }
}

Benchè il colore sia stato definito successivamente all'altezza della linea, a livello di computazione, essendo stato definito nel layer reset, verrà valutato con priorità più elevata.