La guida per principianti alla specificità CSS

Hai mai provato a sovrascrivere una regola CSS, solo per scoprire che non funziona come dovrebbe? O notato quando un elemento viene preso di mira più volte con diverse combinazioni di selettori CSS, viene applicata solo una regola alla volta? Questo è tutto a causa delle regole di specificità CSS.

Le regole di specificità CSS possono essere uno dei concetti più confusi da comprendere, soprattutto per i principianti.

Se stai appena iniziando con i CSS, come regola d'ordine standard, potresti pensare che l'ultima regola CSS debba sovrascrivere quella vecchia. Sembra semplice, ma non sempre funziona così. Dipende dalla specificità CSS, quando e quale regola CSS dovrebbe essere applicata.

Quindi analizziamo cos'è la specificità CSS e come usarla in modo efficiente.

Cos'è la specificità nei CSS?

In parole semplici, se hai più selettori CSS per un elemento, verrà applicato quello con il valore specifico più alto.

Diversi selettori hanno pesi diversi e il browser deciderà quale è il più rilevante per quell'elemento.

Come funziona?

La specificità di un selettore può essere classificata nei seguenti quattro livelli:

1. Stile inline o CSS
2. ID
3. Classi, pseudo-classi e attributi
4. Elementi o pseudo-elementi

Gli stili in linea o CSS , dove i CSS vengono applicati direttamente al documento HTML, hanno questo aspetto <p> . Gli stili in linea avranno sempre il livello di specificità più elevato.

I secondi in questo ordine sono gli ID , come #content . Quindi qualsiasi selettore che utilizza un ID avrà il secondo livello di specificità più alto.

Le classi , le pseudo-classi e gli attributi sono terzi in questo ordine. Hanno il seguente aspetto: .post , :hover e [title] , rispettivamente.

Gli elementi e gli pseudo-elementi hanno il valore minimo. li e :after sono esempi base di un elemento e di uno pseudo-elemento.

Il calcolo

Il valore di specificità può essere calcolato con la seguente linea guida:

• Stile inline o css: 1,0,0,0
• ID: 0,1,0,0
• Classe o pseudo-classe e attributo: 0,0,1,0
• Elementi e pseudo-elementi: 0,0,0,1
• Selettore universale(*): 0

Per verificare il livello di specificità del tuo selettore, puoi utilizzare il calcolatore di specificità.

Regole di base della specificità CSS

Ora che hai un'idea di come è organizzata la specificità, discutiamo alcune regole generali ed esempi!

Questo è l'HTML di base che userò nei miei esempi. Qui ho un piccolo elenco all'interno di un contenitore con #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Regola 1

Se hai due o più selettori uguali per un elemento, avranno tutti lo stesso valore di specificità, quindi verrà applicato quello più basso o l'ultimo.

Nel seguente frammento CSS, entrambi i selettori hanno la stessa specificità, quindi il colore li sarà giallo, poiché è posizionato più in basso nella riga.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Regola 2

Se vengono utilizzati più selettori per un elemento, verrà applicato il selettore con il valore specifico più alto.

Nell'esempio seguente, li viene preso di mira da due diversi selettori ed entrambi influiscono sul colore del carattere. Quindi, quale regola dovrebbe essere applicata?

Come l'istanza precedente, nel concetto di ordine CSS dovrebbe essere applicato il secondo (quindi il colore li sarebbe verde) ma poiché .list li ha un valore di specificità più alto di ul li , il colore rimarrà rosso.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Regola 3

Abbiamo visto che la classe supera gli elementi nel livello di specificità, ora vediamo cosa succede con un ID.

Nell'esempio seguente, abbiamo una classe e un ID che prendono entrambi di mira lo stesso elemento e influenzano il colore del carattere. Di nuovo la stessa domanda: quale regola dovrebbe essere applicata?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Come accennato in precedenza, ID ha un valore di specificità più elevato rispetto a classe, attributi ed elementi, quindi il colore sarà blu. Scegli sempre come target l'ID per un livello di specificità superiore.

Regola 4

!important sovrascriverà qualsiasi selettore di qualsiasi valore di specificità. Ma tieni presente che !important non dovrebbe essere abusato, perché non è considerato una best practice CSS.

Se sei l'autore del tuo CSS e non sovrascrivi una regola esistente, difficilmente avrai bisogno di usare !important .

Usa !important solo quando stai tentando di sovrascrivere il CSS di qualcun altro e la tua specificità non è in grado di superare il selettore precedente, specialmente quando non puoi controllare l'ordine di posizionamento del tuo CSS nell'HTML.

Ciò accadrà principalmente mentre lavori in WordPress, dove troverai molti file CSS già aggiunti da diversi plugin e temi.

In generale, il plugin CSS è specifico per il plugin e utilizza ID, inline-css o anche !important per una maggiore specificità, per evitare qualsiasi conflitto CSS. Per sovrascrivere quel CSS, devi usare una specificità ancora più elevata; per questi scenari puoi usare !important .

Nell'esempio seguente, sto ricreando gli scenari precedenti, con li targetizzati con diversi selettori CSS, ma puoi vedere che !important sovrascrive tutte le regole e il colore sarà giallo.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important ti darà il potere di far rispettare il tuo CSS al di sopra di qualsiasi livello di specificità.

Devi stare attento mentre usi !important perché non puoi ignorare questa regola. L'unico modo per sovrascrivere un !important è usare un altro !important più avanti nel CSS, in modo che il tuo CSS possa facilmente sembrare disordinato se non ne capisci la potenza.

Alcune eccezioni

Gli elementi e gli pseudo-elementi hanno la minor specificità, ma ci sono alcune eccezioni interessanti (e leggermente confuse!). (Confusione perché non sembrano seguire le regole che abbiamo appena visto.)

In questo esempio, vedrai :first-child (pseudo-class) e :first-line (pseudo-element). Abbiamo appena appreso che le pseudo-classi avranno una specificità maggiore rispetto agli pseudo-elementi, quindi in base a ciò, il colore della prima riga del paragrafo dovrebbe essere verde, ma invece sarà rosa.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Potresti pensare che l'ordine sarebbe un problema qui, ma anche cambiare l'ordine non cambierà l'output. Il calcolatore di specificità mostra un'immagine diversa rispetto al risultato.

È qui che la specificità diventa un po 'confusa. Posso solo supporre che la ragione di questo risultato sia :first-line è più vicina all'elemento e probabilmente trattata come inline-style. Puoi controllare jsfiddle per un altro esempio.

Come utilizzare la specificità in modo efficiente?

Se comprendi le regole di specificità del CSS, puoi usarlo in modo molto efficiente e rendere riutilizzabile il tuo CSS.

Supponiamo che tu voglia utilizzare lo stesso .button ma con colori di sfondo diversi, quindi imposti un selettore specifico: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Se .button è racchiuso in un contenitore .red-block , il colore di sfondo del pulsante predefinito cambierà in rosso.

La specificità CSS è molto utile quando si personalizzano i temi di WordPress, in cui si tenta di sovrascrivere il CSS dell'autore del tema con il proprio.

Errori comuni da evitare

Alcune persone usano selettori ultra specifici, il che non è una buona pratica. Sii specifico quanto richiesto. Ad esempio, questo frammento di codice ha come target il li ma è troppo specifico.

 [css] div#content ul.list li{ color: purple; } [/css]

Se sei troppo specifico con il tuo CSS, diventerà rigido e più difficile da riutilizzare. Potresti facilmente scrivere .list li invece di div#content ul.list li , che renderà il tuo CSS più pulito.

Risorse addizionali

• W3 org sulla specificità
• Calcolatore di specificità CSS
• Errore di Internet Explorer
• IE Hack

Conclusione

Come puoi vedere, la specificità CSS è uno strumento importante e ogni sviluppatore front-end dovrebbe averlo nel proprio toolkit. Una chiara comprensione di questo concetto può fare molto per renderti un buon sviluppatore front-end.