Con @layer, possiamo identificare aree di contesto CSS, in cui vengono applicate specifiche regole e poi elaborate a seconda dell'ordinamento assegnato sulla pagina.

Abbiamo anche la possibilità di creare regole @layer annidate, i cui nomi dei layer risultanti sono una combinazione degli identificatori esterni e interni, separati da un punto.

@layer default {
  p { max-width: 70%; }
}

@layer framework {
  @layer main {
    p { margin-block: 0.75em; }
  }

  /*senza nome*/
  p { margin-bottom: 1em; }

  @layer theme {
    p { color: #222; }
  }
}

/*senza nome*/
@layer  {
  p { max-width: 100%; }
}

I layer e l'ordine risultanti sono:

• default
• framework.main
• framework.theme
• framework *senza nome*
• *senza nome*

Come sintassi abbreviata, i layer annidati possono essere descritti anche combinando gli identificatori in una singola regola, velocizzandone la modifica:

@layer default {
@layer framework.theme {
   p { line-height: 10px; }
}

Una regola importante da ricordare è che, utilizzando i layer annidati, il layer interno otterrà automaticamente la nomenclatura relativa al suo parent, rendendo così impossibile referenziare layer con scope più ampio. Nell'esempio seguente vediamo come il layer default, benchè dichiarato tre volte, assume un significato differente a seconda del punto in cui viene scritto.

@layer default {

@layer default;
@layer framework {
   @layer default { /* framework.default */ }
   @layer theme.default { /* framework.theme.default */ }
}