Jinsi gani hesabu ya CSS specificity?

Question

Accepted Answer

Wakati sheria kadhaa zinakabidhi kipengele sawa, **specificity** inaita ni ipi inayoshinda. Ni alama inayohesabiwa kutoka sehemu za selector, ikilinganishwa kama tuple `(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)
```

Linganisha kutoka kushoto kulia; safu ya kwanza inayotofautiana inaona mshindi.

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

## Sheria muhimu

- Kitambulisho **id** kimoja kilingana na kila idadi ya **classes**; darasa moja kilingana na kila idadi ya elements. (Huwezi "kuongeza" tabaka chini ili kushinda tabaka la juu.)
- Ikiwa specificity ni **sawa**, sheria inayoonekana **baadaye** katika chanzo inashinda (mpangilio wa chanzo).
- **`!important`** inasita specificity ya kawaida kabisa — njia ya mwisho ambayo ni ngumu kusita (ungelihitaji `!important` nyingine yenye specificity ya juu).

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

## Mwongozo wa vitendo

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

## Kwa nini kimaanisha

Makosa mengi ya "kwa nini CSS yangu hairuhusu?" ni mgogoro wa specificity — sheria maalum zaidi mahali pengine inashinda.

Kusimamia selectors kwa kiwango cha chini na jengo (pendekeza darasa moja, epuka ids na `!important`) husimamia specificity kuwa inatarajiwa, hivyo mitindo inabaki rahisi kusita na kutekeleza.