# Cos'è la Specificità CSS?
La specificità CSS è l'algoritmo con cui i browser decidono quali valori di proprietà applicare a un determinato elemento. È essenzialmente un punteggio matematico che indica al browser "quanto specifica" sia una regola.Se due regole hanno livelli di specificità diversi, vince quella con peso maggiore, indipendentemente dall'ordine in cui sono state scritte. Se entrambe hanno lo stesso peso, vince l'ultima dichiarata nel codice sorgente.# Come si calcola la specificità CSS
La specificità si calcola in base a tre categorie che formano un peso a tre colonne, spesso espresso come (A, B, C):- Colonna A (ID): Conta il numero di identificatori univoci. Esempio:
#headervale 1 nella colonna A. - Colonna B (Classi, Attributi e Pseudo-classi): Conta tutte le classi (
.button), gli attributi ([type="text"]) e le pseudo-classi (:hover). - Colonna C (Elementi e Pseudo-elementi): Conta tutti gli elementi HTML (
div,h1) e i pseudo-elementi (::before).
# La regola d'oro: nessun riporto numerico
Una regola con specificità (0,50,0) non sarà mai più specifica di una regola (1,0,0). Un singolo ID batte infinite classi. Le colonne non traboccano mai l'una nell'altra.
# Il problema di !important e l'architettura BEM
La direttiva!important è un'eccezione alle regole di specificità. Quando viene usata, quella dichiarazione sovrascrive automaticamente qualsiasi altra. È considerata una cattiva pratica perché distrugge la cascata naturale.Per evitare guerre di specificità nei progetti grandi, metodologie come BEM promuovono l'uso esclusivo di selettori di classe a un solo livello di profondità, mantenendo artificialmente la specificità piatta a (0,1,0).