Nello scorso script abbiamo avuto una panoramica sull'utilizzo dei layer e del loro contributo. Abbiamo visto come a seconda del nome e dell'ordine possano essere computati non linearmente, come di solito accade quando parliamo di CSS.

Soffermiamoci proprio sull'identificatore opzionale del layer, quello che rappresenta il nome del layer.

Questo rispetta una semplice regola: se il nome del layer corrisponde a un layer esistente definito nello stesso scope del layer, contesto di incapsulamento e origine, le regole di stile vengono assegnate a quel layer esistente. Se non viene fornito alcun identificatore o non corrisponde a un nome di layer esistente, viene creato un nuovo layer.

I nomi dei layer consentono di applicare più blocchi di stile in vari punti della pagina:

/* Tutto il codice verrà inserito nel layer default */
@layer default url(headings.css);
@layer default url(links.css);

@layer default {
  audio[controls] {
    display: block;
  }
}

I layer senza nome non possono essere referenziati da altre posizioni. Sebbene si comportino esattamente come i layer nominati, non forniscono un "hook" per unire o riordinare le regole @layer:

/* importazione senza nome */
@layer url(reset.css);
@layer url(base.css);

@layer {
  /* layer senza nome 1 */
}

@layer {
  /* layer senza nome 2 */
}

Le motivazioni per questa scelta possono essere varie: da una definizione di un layer come sottoinsieme di regole, alla creazione di un layer che risulterà privato e di cui le regole non potranno essere modificate, se non utilizzando un layer superiore. Come nell'esempio seguente, in cui le principali librerie vengono importate atomicamente, senza consentirne l'accesso.

/* file bootstrap-base.css */
/* layer senza nome in cui importare tutte le parti senza nome */
@layer url(base-forms.css);
@layer url(base-links.css);
@layer url(base-headings.css);

/* file bootstrap.css */
/* importazione del file precedente utilizzando un unico nome "base" */
@layer base url(bootstrap-base.css);

/* file main.css */
/* file css principale, in cui abbiamo accesso al layer bootstrap.base, ma non ai layer senza nome */
@layer bootstrap url(bootstrap.css);