Come viene calcolata la specificità CSS?

Question

Accepted Answer

Quando multiple regole colpiscono lo stesso elemento, la **specificità** decide quale vince. È un punteggio calcolato dalle parti del selettore, confrontato come tupla `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Confronta da sinistra a destra; la prima colonna che differisce decide il vincitore.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Regole chiave

- Un singolo **id** prevale su qualsiasi numero di **classi**; una singola classe prevale su qualsiasi numero di elementi. (Non puoi "sommare" i livelli inferiori per battere uno superiore.)
- Se la specificità è **uguale**, la regola che appare **dopo** nel sorgente vince (ordine del sorgente).
- **`!important`** ignora completamente la specificità normale — un ultimo ricorso difficile da ignorare (avresti bisogno di un altro `!important` con specificità più alta).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Guida pratica

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Perché è importante

Molta della frustrazione "perché il mio CSS non si applica?" è un conflitto di specificità — una regola più specifica altrove sta vincendo.

Mantenere i selettori bassi e piatti (favorisci le classi singole, evita gli id e `!important`) mantiene la specificità prevedibile, così gli stili rimangono facili da ignorare e mantenere.