Yadda ake ƙididdige CSS specificity?

Question

Accepted Answer

Lokacin da ka'idodi masu yawa ke nutsewa ga abin kama, **specificity** tana sanye wajen nace ta radi. Ita ce jiya da aka ƙididdige daga sassa na zaɓin, ana ƙvada a matsayin 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)
```

Jiyya daga inni zuwa dama; shafi na farko da ya banbanta ya ƙididdige likita.

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

## Mahimman ka'idodi

- Acces **id** ɗaya ya ƙara girma ɗan kowane adadin **classes**; aiki ɗaya na aiki yana ƙara girma ɗan kowane adadin abubuwanda. (Ba zaka iya "ƙari" ƙananan mataku don ƙetare gida mafi girma ba.)
- Idan specificity ya kasance **daidai**, ka'idar da ta bayyana **gida** a itace ta ƙaurin itace (tsarin itace).
- **`!important`** ya ɓata yadda specificity ta yada gida — tukey na ƙarshe wanda ya yi tsanani a ƙetare (za ka kamata ka buga wani `!important` tare da specificity mafi girma).

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

## Jagora mai aiki-aiki

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

## Yake matukaicin

Gefen jimloli "me ya sa CSS ta ba sa aiki ba?" bacin rai ni da jigon specificity — ka'idar da ta fi santsinkatsa a waje tana ciniko.

Dome zaɓin gida kasa da kwatace (gaya daɗi ga azuzuwan amfani, guje ids da `!important`) tana rike specificity da za a iya hasashe, don da haka sifofin taya masu tawa da kula da tashi.