La specificità dei selettori CSS

Cosa sono i CSS

I CSS (Cascading Style Sheets) sono un linguaggio utilizzato nello sviluppo frontend per definire l’aspetto e la formattazione delle pagine web.

Tramite apposite regole, con i CSS è possibile specificare il colore, il layout, il tipo di carattere, le dimensioni e molti altri attributi visivi dei vari elementi HTML su una pagina web.

I selettori CSS disponibili

Con i CSS possiamo selezionare gli elementi daa modificare utilizzando i seguenti selettori:

per esempio possiamo selezionare tutti i paragrafi di testo della nostra pagina (tag <p> ) e assegnargli un determinato colore adoperando il selettore:

p {
  color: blue;
}

Con delle semplici regole, quindi, possiamo velocemente intervenire sull’aspetto dei diversi elementi di una pagina web.

Gestire le eccezioni: la specificità

Come visto, la funzione principale dei CSS è imporre delle regole di stile al contenuto di una pagina web, ma capita spesso di voler limitare il raggio di azione di una regola CSS o modificarla in certi casi specifici.

Dato per esempio questo titolo:

<h1>Questo è un titolo</h1>

e questa regola:

h1 {color: red;}

poniamo di voler ottenere un titolo di colore diverso in una pagina secondaria. In questo caso, se per la nuova pagina non vogliamo caricare un nuovo set di regole, dovremo trovare un modo per “sovrascrivere” la regola precedente.

La regola vista sopra, infatti, si applica a tutte le intestazioni di primo livello a cui è applicato l’insieme di regole indicate nei nostri CSS.

Una soluzione può essere applicare una regola più specifica per il nostro titolo, attribuendogli per esempio una classe (a cui possiamo assegnare un nome a nostra scelta), il cui relativo selettore avrà la prevalenza sul selettore del tag.

Ma come mai questo avviene?

Conflitti tra regole: la cascade

Quando ci sono regole CSS conflittuali per lo stesso elemento HTML, il browser utilizza il processo di “cascata” per determinare quale regola applicare. Di norma infatti, se abbiamo due selettori dello stesso tipo che operano su uno stesso elemento, prevale quello che viene dichiarato per ultimo. Questo concetto viene definito appunto “cascata degli stili”, dove idealmente le regole successive sovrascrivono le precedenti dello stesso tipo.

In caso di conflitto però le regole non vengono scelte solo dall’ordine in cui compaiono ma anche in base alla specificità del selettore usato. Infatti, ogni selettore ha un livello di “priorità” differente, rappresentato dalla sua specificità.

Ordine di specificità dei selettori

Esistono più modi per visualizzare numericamente la specificità, dei selettori. A mio avviso la rappresentazione più chiara è la seguente:

ogni tipo di selettore ha quindi un valore di specificità associato, che determina quale regola avrà la precedenza in caso di conflitto. Maggiore il punteggio, maggiore sarà la specificità del selettore che quindi prevarrà sugli altri.

Un esempio… specifico

Consideriamo per esempio il seguente codice HTML

<div id="container">
    <p class="highlight">Questo è un paragrafo con una classe.</p>
  </div>

e il codice CSS

#container p { color: blue; }
.highlight { color: red; }

In questo caso, il testo del paragrafo sarà blu perché il selettore #container p (100 + 1 punti) ha una specificità maggiore rispetto al selettore .highlight (10 pt).

Analogamente si può applicare la stessa regola a tutti gli altri selettori per capire come mai il nostro codice CSS sembra non funzionare.

La specificità infinita, il modificatore !important

!important è un modificatore che si applica a un valore di stile per indicare che esso ha la massima priorità.

Non trattandosi di un selettore, !important non ha una sua specificità, ma semplicemente sovrascrive tutte, e cosa più importante, non viene mai sovrascritto da regole CSS successive a prescindere dalla loro specificità.

Perchè evitare !important

Anche se in certi casi particolari può risultare utile, è generalmente sconsigliato utilizzare questo modificatore perchè introduce un livello di complessità da tenere a mente e rende più difficile la manutenzione del codice, oltre a portare spesso a imprevisti. Inoltre, è come barare nei videogame… leva tutto il divertimento.

In sintesi…

Inizialmente i CSS sono semplici da usare, ma il loro funzionamento è piuttosto complesso.

L’aspetto che spesso confonde dei CSS è che si tratta di un linguaggio estremamente tollerante. Se qualche regola contiene errori viene semplicemente ignorata dal browser e non produce nessun log dove poter andare a verificare cosa è andato storto. In questo contesto è vitale avere una buona padronanza dei fondamenti di questo linguaggio, e la specificità è uno degli elementi chiave per poterla ottenere.

Spero che questo post possa tornare utile per fare un po’ di luce su questo argomento e come punto di partenza per ulteriori approfondimenti.