Jak obliczana jest specyficzność CSS?

Question

Accepted Answer

Gdy wiele reguł dotyczy tego samego elementu, **specyficzność** decyduje o tym, która z nich wygra. To wynik obliczony na podstawie części selektora, porównywany jako krotka `(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)
```

Porównaj od lewej do prawej; pierwsza kolumna, która się różni, decyduje o zwycięzcy.

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

## Kluczowe reguły

- Jedno **id** przeważa dowolną liczbę **klas**; jedna klasa przeważa dowolną liczbę elementów. (Nie możesz "sumować" niższe poziomy, aby pokonać wyższy.)
- Jeśli specyficzność jest **równa**, reguła, która pojawia się **później** w źródle, wygrywa (kolejność źródła).
- **`!important`** całkowicie ignoruje normalną specyficzność — ostatnia deska ratunkowa, którą trudno przesłonić (potrzebowałbyś kolejnego `!important` o wyższej specyficzności).

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

## Praktyczne wskazówki

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

## Dlaczego to ważne

Większość frustracji "dlaczego mój CSS nie działa?" to konflikt specyficzności — bardziej specyficzna reguła gdzieś indziej wygrywa.

Utrzymywanie selektorów nisko i płasko (preferuj pojedyncze klasy, unikaj id i `!important`) sprawia, że specyficzność jest przewidywalna, więc style łatwo się przesłania i utrzymuje.