Dichiarazione e ordine di @layer

I livelli della cascata CSS (@layer) forniscono un meccanismo per controllare esplicitamente la priorità delle regole CSS nella cascata, indipendentemente dalla specificità. I livelli con priorità inferiore perdono anche quando contengono selettori con specificità maggiore.

Senza i livelli, ogni regola CSS compete usando la specificità e l'ordine nel codice sorgente. Questo porta a conflitti di specificità, quando gli stili di reset, dei componenti e delle utility competono tutti per la priorità. I livelli assegnano a ogni gruppo una priorità fissa e prevedibile.

Dichiari i livelli in anticipo con un'unica istruzione. L'ordine di dichiarazione determina la priorità: i livelli dichiarati successivamente prevalgono su quelli dichiarati precedentemente.

La dichiarazione @layer dovrebbe trovarsi all'inizio del foglio di stile (o del file principale di importazione). Dopo la dichiarazione, può aggiungere gli stili ai livelli in qualsiasi ordine: la priorità è determinata dall'ordine di dichiarazione, non dal punto in cui vengono aggiunti gli stili.

Poiché la priorità dei livelli viene determinata al momento della dichiarazione, può aggiungere gli stili a un livello in qualsiasi punto, anche prima che sia stato dichiarato, facendo riferimento in avanti. Ciò che conta è l'ordine dichiarato.

Una dichiarazione in un livello successivo prevale sempre su una dichiarazione in un livello precedente, indipendentemente dalla specificità:

Gli stili inseriti al di fuori di qualsiasi livello sono detti non appartenenti a livelli. Hanno la priorità più alta, persino maggiore di quella dell'ultimo livello dichiarato. Li usi per override di emergenza che devono sempre prevalere.

Ordine completo delle priorità (dalla più alta alla più bassa per gli stili dell'autore):

1. Stili non appartenenti a livelli (al di fuori di qualsiasi @layer)
2. Ultimo livello dichiarato (ad esempio, utilities)
3. Penultimo livello (ad esempio, components)
4. Livelli precedenti (base, reset)

!important nei livelli è un aspetto delicato: inverte l'ordine dei livelli per quella dichiarazione. !important nel livello più iniziale prevale su !important nei livelli successivi. Questo rispecchia il comportamento originale della cascata per gli stili dell'utente e dell'autore.

I livelli possono essere nidificati usando la notazione con il punto:

Una configurazione realistica dei livelli per un progetto:

I livelli sono dichiarati come segue: @layer base, components, utilities. Gli stili di quale livello prevalgono in caso di conflitto?

@layer stabilisce livelli della cascata ordinati esplicitamente. Dichiari i nomi dei livelli nell'ordine di priorità, dal più basso al più alto. I livelli successivi prevalgono sempre su quelli precedenti, indipendentemente dalla specificità. Gli stili non appartenenti a livelli hanno la priorità più alta. !important inverte l'ordine di priorità dei livelli per quella dichiarazione.