Cosa sono i cascade layers in CSS?

Nelle lezioni precedenti abbiamo ampiamente discusso delle regole che tengono in piedi CSS, la specificità e la cascata. Questo meccanismo per quanto possa sembrare infallibile con il web moderno ha presentato alcune lacune abbastanza importanti. Prima tra tutte la necessità di avere selettori sempre più specifici per sovrascrivere certe regole.

Questo problema in particolare si chiama aumento dei conflitti di specificità che possiamo tradurre con per sovrascrivere delle dichiarazioni o intere regole abbiamo bisogno di selettori più specifici o di !important.

Per “affrontare” questa problematica nel tempo sono state introdotte delle “metodologie” e delle “best practice”, metto tutti questi termini tra virgolette perché la realtà dei fatti è che questo problema non è stato mai effettivamente affrontato, ma aggirato.

Fortunatamente la specifica di CSS è arrivata con una soluzione, i cascade layers.

Cosa sono i cascade layers

Una definizione estremamente generica, anzi quasi possiamo definirla una banalizzazione di cosa sono i cascade layers può essere: i cascade layers sono gruppi di regole CSS, i quali hanno priorità diverse in base all’ordine con la quale li scriviamo.

Più specificatamente, i cascade layers danno la possibilità di avere un controllo diretto sulla cascata così da costruire un sistema che non si affidi esclusivamente ai meccanismi già ampiamente discussi di cascata e specificità.

Con i cascade layers possiamo costruire la nostra cascata, da quella con stili meno prioritari, fino a quella più specifica. Non solo, in questo modo possiamo anche organizzare meglio i nostri fogli di stile.

Non disperare quanto appreso finora è ancora validissimo, la specificità viene usata per risolvere i conflitti all’interno dei layer, mentre i conflitti tra layer vengono risolti in base alla priorità tra di essi.

Infine, se una proprietà di un layer meno prioritario dovesse, per forza, sovrascrivere tutte le altre regole nei layer successivi, basterà, come sempre, usare !important.

1@layer base {
2  p#intro.testo-rosso {
3    color: maroon;
4  }
5}
6
7@layer theme {
8  p {
9    color: rebeccapurple;
10  }
11}

In questo semplice esempio, se applicassimo solo ed esclusivamente le regole che abbiamo visto finora di CSS penseremmo che il selettore p#intro.testo-rosso essendo più specifico verrà applicato al posto di un poco specifico p e sarebbe corretto, ma in questo caso abbiamo usato i @layer e questo significa che @layer theme venendo dopo @layer base ha una priorità maggiore e quindi il colore del paragrafo sarà rebeccapurple.

Altre caratteristiche dei cascade layers

Ovviamente, le peculiarità dei layer non terminano qui, non sono solo semplici gruppi di regole. I layer possono essere annidati. Quelli di secondo livelli avranno una priorità inferiore rispetto a quelli di primo livello.

1@layer base {
2   @layer base2 {}
3}

I fogli di stile possono essere importanti con la at-rule @import e assegnati ad un layer. Su questa strategia avrei qualcosa da ridere per quanto riguarda le performance, vediamo qui di seguito.

1@import url("base.css") layer(base);
2@import url("theme.css") layer(theme);

@import per quanto comodo è un problema per le performance perché i fogli di stili vengono scaricati solo quando il foglio di stile verrà elaborato dal parser e non durante la fase di pre-parsing. Personalmente evito @import a meno che non utilizzi un pre-processore o un sistema di bundling che mi restituisca un foglio di stile unico a fronte di un implementazione così “modulare”.

I layer possono essere anonimi, ciò significa che dopo la at-rule @layers non è obbligatorio specificare un nome, ma attenzione, così facendo non sarà più possibile riordinarli.

1@layer {
2   p {
3      color: red;
4   }
5}

Per le proprietà esiste una nuova keyword chiamata rever-layer, che in sostanza dice di ereditare il valore della proprietà impostata nel layer precedente.

1@layer {
2   p {
3      color: red;
4   }
5}
6
7@layer {
8   p {
9      color: revert-layer;
10   }
11}

Tutte le regole poste al di fuori di un layer hanno priorità massima, a meno che non ci sia qualche !important in giro.

A cosa servono i cascade layers?

Ecco questa è la domanda da un milione di dollari. La tre cose che mi vengono in mente sono sicuramente:

• Stili di default e reset meno invasivi
• Gestione di architetture CSS più complesse
• Maggior controllo quando si usano framework (es. Tailwind, Bootstrap, ecc.)

Mettiti alla prova per vedere se hai capito.

1@layer base {
2  #intro {
3    color: red;
4  }
5}
6
7h1 {
8  color: blue;
9}

Che colore sarà il titolo?

1@layer base, override;
2@layer base {
3  h1 {
4    color: red !important;
5  }
6}
7
8h1 {
9  color: green;
10}
11
12@layer override {
13  h1 {
14    color: blue !important;
15  }
16}

Che colore sarà il titolo?

1@layer Base, Override, Theme;
2@layer Base.Layer-1 {
3  #intro {
4    color: red;
5  }
6}
7
8@layer Base.Layer-2 {
9  h1 {
10    color: orange;
11  }
12}
13
14@layer Override.Layer-3 {
15  h1 {
16    color: yellow;
17  }
18}
19
20@layer Theme {
21  * {
22    color: blue;
23  }
24}
25
26@layer Override.Layer-4 {
27  #intro {
28    color: green;
29  }
30}

Che colore sarà il titolo?

Le risposte le trovi nel video a partire dal minuto 23:38