La cascade: origine e ordine

La cascata è l'algoritmo che CSS utilizza per determinare quale dichiarazione di stile prevale quando più regole si applicano alla stessa proprietà dello stesso elemento. Tiene conto dell'origine, dell'importanza, della specificità e dell'ordine nel codice.

Le dichiarazioni CSS provengono da tre origini, in ordine di priorità:

1. Foglio di stile dello user agent — impostazioni predefinite del browser
2. Foglio di stile dell'utente — stili personalizzati impostati dagli utenti (accessibilità)
3. Foglio di stile dell'autore — i propri file CSS

Con dichiarazioni normali (non importanti), gli stili dell'autore sovrascrivono quelli dell'utente, che a loro volta sovrascrivono quelli dello user agent. Ecco perché il proprio CSS prevale sulle impostazioni predefinite del browser.

L'aggiunta di !important inverte l'ordine delle origini per quella dichiarazione:

1. !important dello user agent
2. !important dell'utente — priorità più alta (accessibilità)
3. !important dell'autore

Per questo le sovrascritture per l'accessibilità dell'utente (ad esempio, i colori forzati) non possono essere annullate dal CSS dell'autore.

Quando competono due dichiarazioni della stessa origine, a determinare quale prevale è la specificità. Prevale la specificità maggiore: è questo il primo aspetto a cui gli sviluppatori pensano quando eseguono il debug del CSS.

Quando due regole hanno la stessa specificità, prevale quella che compare più avanti nel foglio di stile. Questa è la regola dell'«ordine nel codice». Per questo è importante l'ordine delle dichiarazioni @import e @keyframe.

I livelli della cascata CSS (@layer) introducono un nuovo passaggio della cascata tra l'origine e la specificità. L'ordine dei livelli determina la priorità e una dichiarazione in un livello successivo prevale su una in un livello precedente, indipendentemente dalla specificità.

Ordine completo di priorità (dal più alto al più basso):

1. Origine + importanza (!important dell'utente, !important dell'autore)
2. Valori delle animazioni
3. Livelli CSS (prevalgono i livelli successivi)
4. Specificità
5. Ordine nel codice
6. Valori delle transizioni

L'ereditarietà è diversa dalla cascata. I valori ereditati provengono dallo stile calcolato dell'elemento padre. Vengono superati da qualsiasi valore applicato direttamente, anche se proviene da una regola con bassa specificità.

Posizioni gli stili più specifici (le varianti) dopo gli stili di base nel foglio di stile. Per questo i file dei componenti dovrebbero essere importati dopo i file di reset e di base.

Nel pannello Styles di DevTools, le regole sono elencate dalla priorità più alta a quella più bassa. Le regole barrate hanno perso nella cascata. Passi il mouse su una regola per visualizzare il file sorgente e il numero di riga durante il debug.

Due regole si applicano alla stessa proprietà e hanno una specificità identica. Quale prevale?

La cascata risolve i conflitti di stile utilizzando prima l'origine (autore > utente > browser), poi l'importanza (!important inverte l'ordine), quindi l'ordine di @layer, la specificità e infine l'ordine nel codice. Comprendere la cascata consente di prevedere esattamente quale regola prevarrà in qualsiasi conflitto, senza più dover tirare a indovinare.