css-the-cascade-specificity-thumbnail

Ehi gente del web in questo tutorial andiamo a capire cos’è la specificity. Quando un conflitto non può essere risolto con la stylesheet origin entra in ballo specificity. Che cos’è specificity? Specificity è un insieme di regole che, in base ad un punteggio, guidano il browser ad applicare una dichiarazione piuttosto di un altra.  

Come detto nel tutorial introduttivo a cascade: cascade è un insieme di regole, ed anche specificty è un insieme di regole, all’interno delle regole di cascade.

Se sei già pratico di css e magari ti è capito di voler applicare uno stile ad elemento ma non riscontrare il risultato che ti aspetti, molte volte questo è dovuto alla specificity.

Capire stylesheet origin è semplice, in quanto basta seguire e tenere in considerazione l’ordine. Capire specifity richiede un minimo di calcolo, ma è la parte più importante di cascade ed è fondamentale capirla e tenerela sempre a mente quando si scrive codice in CSS.

CSS3 - dimostrazione dei valori di Specificity
CSS3 – dimostrazione dei valori di Specificity

Il browser per valutare la specificity usa una struttura gerearchica, in testa, con il valore specifco più alto, abbiamo l’inline style, a seguire i selector, che a loro volta hanno diversi valori. L’inline style ha il valore di 1 0 0 0,  id ha il valore di  0 1 0 0 , class, pseudo-class e attribute hanno il valore di 0 0 1 0 e element e pseudo-element hanno il valore di 0 0 0 1.

I selectors si possono anche sommare, ad esempio se uso una class ed una pseudo-class il valore di specificty diventerebbe 0 0 2 0. In questo caso sarebbe maggiore rispetto ad una direttiva dove si usa solo class (0 0 1 0) e sovrascriverebbe quest’ultima.

/* 0 1 0 0 */
#main-heading {
  color: pink;
}
/* 0 0 2 0 */
.subheading:hover {
  background-color: yellow;
}
/* 0 0 1 0 */
.heading {
  color: blue;
}
/* 0 0 0 1 */
h1 {
  color: red;
}

Ci sono anche due casi speciali da sapere e ricordare, soprattutto uno di questi due, ed è !important. !important rende il valore delle dichiarazioni più importante rispetto a tutti gli altri valori, anche quelli compresi nell’inline style. !important si aggiunge dopo il valore, appena prima del ; ed è preceduto dal !. Il valore specifico di è 1 0 0 0 0.

h1 {
  color: red !important; /* important 1 0 0 0 0 */
}

L’altra eccezione fa riferimento al selettore universale *, questo ha il valore specifico più basso in assoluto: 0 0 0 0, ed è quindi sovrascritto da tutti gli altri.

/* 0 0 0 0 */
* {
  color: purple;
}

Cosa dobbiamo ricordarci da questo tutorial? Quando applichiamo il css alle pagine web dobbiamo tenere la specificity più bassa possibile, in modo tale da poter più facilmente modificare gli stili in un secondo momento o in una seconda fase del progetto.

Evitare di usare l’inline style, ovviamente, cerchiamo di mantenere il tutto in file esterni e ben ordinati. Evitare anche di usare !important se non proprio costretti a farlo.

Specificity è essenziale per scrivere un buon CSS: il progetto sarà pulito, in ordine e mantenibile nel tempo. Nel prossimo tutorail tratteremo l’ultimo argomento di cascade, ovvero source order, l’ordine con cui dichiaramo gli stili.


Guarda il video:

Articoli simili