Cum se calculează specificitatea CSS?

Question

Accepted Answer

Când mai multe reguli țintesc același element, **specificitatea** decide care câștigă. Este un scor calculat din părțile selectorului, comparat ca un tuplu `(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)
```

Comparați de la stânga la dreapta; prima coloană care diferă decide câștigătorul.

```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 */
```

## Reguli cheie

- Un singur **id** depășește orice număr de **clase**; o singură clasă depășește orice număr de elemente. (Nu puteți "aduna" niveluri inferioare pentru a bate pe unul superior.)
- Dacă specificitatea este **egală**, regula care apare **mai târziu** în sursă câștigă (ordinea sursei).
- **`!important`** anulează specificitatea normală în întregime — o ultimă soluție care este greu de anulat (ați avea nevoie de alt `!important` cu specificitate mai mare).

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

## Ghid practic

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

## De ce contează

Majoritatea frustării "de ce nu se aplică CSS-ul meu?" este un conflict de specificitate — o regulă mai specifică în altă parte câștigă.

Pastrarea selectorilor joni și plati (favorizați clasele unice, evitați id-uri și `!important`) menține specificitatea previzibilă, deci stilurile rămân ușor de anulat și întreținut.