In questo articolo ti spiego cos’è la specificity che spesso viene incredibilmente snobbata da chi sviluppa un sito web.

E’ sicuramente qualcosa di importante, perché tramite la specificity si riesce capire in che modo strutturare il CSS e si risolvono i dubbi di chi inizia ad applicare proprietà !important o stili in linea per riuscire banalmente a cambiare un colore.

Cos’è la Specificity?

La specificity è il mezzo che utilizza il browser per capire quale valore di una proprietà del CSS applicare ad un elemento.

Cos’è la Specificity in parole povere

Per chi non mastica ancora bene il CSS ti farò un esempio e cerco di darti una definizione più semplice per descrivere la frase di prima.

La specificity è quella cosa che permette al browser di capire se una scritta deve essere rossa, verde o blu.

Cos’è la specificity spiegata ad un bambino? Quando vedi un’auto e per Luca il colore è rosso, l’auto è rossa. Ma se arriva Marco che dice che è Verde, l’auto è verde (il CSS infatti a parità di importanza fa vincere l’ultima proprietà che legge). Se arriva anche Giovanni a dire che l’auto è verde, l’auto sarà sempre verde. Ma se arrivasse un adulto, che per i bambini ha un’importanza sacra in quel che dice, e comunica che l’auto è rossa aveva ragione Luca. Allora l’auto è rossa.

E che vuol dire? La specificity permette al browser di calcolare quale valore di una proprietà del CSS applicare ad un elemento proprio basandosi sull’importanza dei selettori del CSS e su come vengono combinati.

Un esempio reale

Per capire cos’è la specificity ti faccio un esempio reale.

Adesso creo un piccolo testo così fatto:

<div>
   <span> Ciao ! </span>
</div>

Applicando la regola CSS:

span{

color:red;

}

Ottengo questo risultato:

Ciao !

Quello che stiamo dicendo è che ogni scritta all’interno di uno <span> deve essere rossa nel nostro sito. Questa è la norma, la nostra impostazione iniziale del sito.

A questo punto c’è un’eccezione. Ci ritroviamo nel nostro sito a dover dire che se lo <span> si trova all’interno di un <div> allora è necessario fare la scritta verde. Aggiungeremo al CSS questa regola:

div span{
   color:green;
} 

A questo punto la scritta “Ciao !” sarà verde:

Ciao !

Dunque mentre costruiamo il sito web ci accorgiamo che tutte le scritte che hanno classe “profilo” le vogliamo blu. Scriviamo il CSS aggiungendo questa regola:

.profilo{
   color:blue;
}

Aggiungiamo la classe “profilo” al codice HTML:

<div>
   <span class="profilo"> Ciao ! </span>
</div>

Il risultato è questo:

Ciao !

Il problema è che sono sì tutte le scritte, ma quelle dentro lo <span> con classe “profilo” le vogliamo differenziare da quelle che si trovano in altri tag (per esempio <p>). Allora le scritte presenti in un tag <span> con classe “profilo” le vogliamo grigie. Scriviamo nel CSS:

span.profilo{
   color:grey;
}

Otterremo quindi la scritta:

Ciao !

Per concludere possiamo anche impostare che se lo <span> è racchiuso in un tag con id pari a “centro”, allora in quel caso la scritta deve essere arancione. Scriviamo nel CSS:

#centro span{
   color:orange;
}

Quindi modifichiamo l’html:

<div id="centro">
   <span class="profilo"> Ciao ! </span>
</div>

Il risultato è il seguente:

Ciao !

Quindi in che modo viene calcolata la Specificity?

La specificity viene calcolata seguendo queste regole:

1. Lo stile con keyword !important vince su tutto
2. In assenza di stile con keyword !important vince lo stile in linea
3. In assenza di stile in linea e keyword !important vince lo stile più specifico per un elemento
4. In assenza di questi stili si considerano quelli relativi agli antenati
5. In assenza di stile definito si utilizza il default del browser

Come calcolare la specificity numericamente parlando?

Numericamente parlando potremmo dire che:

• Un ID ha valore 100
• Una classe ha valore 10
• Un tag ha valore 1

Inoltre bisogna sempre ricordarsi che è più specifico uno stile applicato direttamente su un elemento che uno stile ereditato.

Di conseguenza, osservando l’esempio visto insieme prima:

• Inizialmente la scritta è rossa perché la proprietà color è applicata sul tag <span>.
  Valore del selettore pari a 1.
• Dunque la scritta diventa verde perché la proprietà color si trova su un selettore combinato da div e span.
  La somma dei 2 tag vale 1 + 1 = 2 e 2 è maggiore di 1.
• Dunque la scritta diventa blu perché la proprietà color fa parte della classe “profilo” che è direttamente applicata sull’elemento contenente la scritta.
  Il punteggio del selettore “.profilo” vale 10 punti, che è una somma di punti maggiore rispetto agli altri selettori.
  Nota Bene: Se la classe “profilo” si fosse trovata sul <div> e non sullo <span> la scritta sarebbe rimasta verde perché anche se “.profilo” vale 10 punti non ci sono selettori che riguardano direttamente la scritta. Di conseguenza essendo presenti selettori diretti dell’elemento si applica lo stile “diretto” e non quello ereditato (in questo caso lo stile di “.profilo” sarebbe stato ereditato come “padre” dall’elemento <span>).
• Dal blu si passa al grigio.
  Questo accade perché “span.profilo” vale ben 1 + 10 = 11 punti.
• Infine dal grigio si passa all’arancione.
  E’ dovuto al fatto che “#centro span” vale 100 + 1 = 101 punti.
  Come per l’esempio di prima se invece di “#centro span” avessimo utilizzato solo “#centro” (valore 100 punti) sarebbe stato comunque applicato il colore grigio e non l’arancione perché uno stile diretto vince su uno stile ereditato. In questo caso però la scritta diventa arancione perché il selettore è dato da “#centro span” che vuol dire “seleziono lo span figlio/nipote di un #centro”.

Conclusioni

Spero che ti ho aiutato a capire un po’ meglio cos’è la specificity. Fondamentalmente uno stile è più specifico di un altro e alla domanda “in base a cosa?” si risponde con quanto visto sopra.

Un libro che mi sento di consigliarti per capire meglio tutto il CSS in generale è questo. L’ho inserito anche tra i 10 + 1 libri che dovrebbe leggere ogni programmatore.

Ricordati che capire la specificity ti permette di creare un CSS ben strutturato così da farti evitare l’utilizzo di stili in linea o di !important. Il problema degli stili in linea e di !important sono molteplici.

Vediamo nell’ottica del riutilizzo: quando utilizzo uno stile in linea è molto facile che avvenga una duplicazione di codice in quanto in più punti scriverai lo stile. Se un giorno tale stile dovrà cambiare per 100 elementi dispersi in un sito web, dovrai mettere le mani a 100 punti diversi del codice. Utilizzando i selettori ed organizzando i CSS modificherai il codice una sola volta!

Inoltre, è più difficile capire come e dove è stato applicato uno stile se si usano stili in linea e la keyword !important.

Ora che hai capito cos’è la specificity non avrai più bisogno di inserire stili in linea e di utilizzare !important e ti potrà essere più facile anche sovrascrivere i comportamenti di un framework CSS a tuo piacimento.

Per maggiori informazioni puoi visitare questa pagina.

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).