La cascata: ordine delle regole e l'algoritmo di risoluzione

La “C” di CSS sta per Cascading (a cascata). È il concetto più importante per capire perché certe regole di stile funzionano e altre sembrano essere ignorate dal browser.

Quando applichi più regole allo stesso elemento, la cascata è l’algoritmo interno del browser che decide quale regola ha la priorità e vince sulle altre.

Il Problema del Conflitto

Considera questo codice CSS:

p {
  color: blue;
}

p {
  color: red;
}

Tutti i paragrafi <p> riceveranno sia l’istruzione di essere blu che l’istruzione di essere rossi. Chi vince? La cascata usa 3 regole principali per risolvere queste controversie.

Regola 1: L’ordine nel codice (L’ultima vince)

A parità di condizioni, se due regole sono scritte per lo stesso elemento, l’ultima che viene letta dal browser vince. Il codice CSS viene letto dall’alto verso il basso.

Nell’esempio precedente, poiché color: red; è scritto dopo color: blue;, tutti i paragrafi saranno rossi.

Questo vale anche per file esterni: se colleghi due fogli di stile nell’HTML:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">

Le regole dentro theme.css sovrascriveranno quelle di base.css (se colpiscono gli stessi elementi con la stessa forza).

Regola 2: Specificità (Chi è più preciso vince)

Cosa succede se i selettori non sono identici, ma puntano allo stesso elemento?

<p class="testo-evidenziato">Testo di prova</p>

.testo-evidenziato {
  color: green;
}

p {
  color: blue;
}

Nonostante la regola del <p> sia scritta dopo, il testo sarà verde. Perché? Perché il selettore di classe (.testo-evidenziato) è più “specifico” del selettore di tag (p). Dedicheremo la prossima lezione interamente al calcolo matematico della specificità!

Regola 3: L’origine (Chi l’ha scritto vince)

Forse non lo sai, ma il CSS non lo scrivi solo tu. Ci sono tre origini del CSS:

1. Il Browser (User Agent): I browser hanno stili di default (es. titoli in grassetto, link blu sottolineati).
2. L’Utente: Un utente ipovedente potrebbe forzare font grandi nelle impostazioni del browser.
3. L’Autore (Tu): Il CSS che scrivi tu per il sito.

L’algoritmo della cascata dà sempre priorità all’Autore (te) rispetto al Browser. Quindi, se tu dici che un link deve essere rosso, vincerai sul default blu del browser.

L’eccezione alla regola: !important

C’è un “pulsante nucleare” nel CSS per forzare la vittoria di una regola ignorando la cascata: l’annotazione !important.

p {
  color: blue !important;
}

.testo-speciale {
  color: red; /* Perderà, nonostante sia più specifico e scritto dopo */
}

Regola pratica professionale: evita !important nel CSS ordinario. Ha senso solo in casi molto circoscritti, per esempio quando devi sovrascrivere stili inline generati da librerie esterne. Se uno stile non si applica, prima controlla ordine, specificità e selettori: quasi sempre il problema si risolve migliorando la struttura delle regole, non forzandole.

---

Esercizi

Base · facile

Dato questo CSS, di che colore sarà il paragrafo? Spiega quale regola della cascata decide.

p { color: blue; }
p { color: red; }

Soluzione

Rosso. A parità di specificità e origine, vince l’ultima regola letta: color: red; è scritta dopo color: blue;.

Intermedio · medio

Crea un caso in cui un selettore di classe scritto prima vince su un selettore di tag scritto dopo, applicati allo stesso elemento. Spiega perché qui non conta l’ordine ma la specificità.

Sfida · difficile

Ti viene dato un file dove qualcuno ha «risolto» tre conflitti aggiungendo !important ovunque. Per ciascun caso, individua se il vero problema era ordine, specificità o origine, riscrivi la regola senza !important, e spiega quando (raramente) !important resta giustificato.