Si llogaritet specifika e CSS-it?

Question

Accepted Answer

Kur rregulla të shumta synojnë të njejtin element, **specifika** vendos cila fiton. Është një pikë e llogaritur nga pjesët e selektorit, e krahasuar si 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)
```

Krahaso nga e majta në të djathtë; kolona e parë që ndryshon vendos fituesin.

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

## Rregulla kyçe

- Një **id** i vetëm tejkalon ndonjë numër **klasash**; një klasë tejkalon ndonjë numër elementesh. (Nuk mund të "shtosh" shtresa më të ulëta për të mposhtur një më të lartë.)
- Nëse specifika është **e barabartë**, rregulli që shfaqet **më vonë** në burimin e tekstit fiton (rendi i burimit).
- **`!important`** anashkalon specifikën normale plotësisht — një zgjidhje e fundit që është e vështirë të anashkalohet (do të duhej një tjetër `!important` me specifikë më të lartë).

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

## Udhëzim praktik

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

## Pse është e rëndësishme

Shumë nga frustrimi "pse CSS-ja ime nuk zbatohet?" është një konflikt specifike — një rregull më i specifik diku tjetër po fiton.

Mbajtja e selektorëve të ulët dhe të sheshtë (prefero klasat e vetme, shmang id-et dhe `!important`) e mban specifikën të parashikueshme, kështu stilet mbeten të lehta për të anashkaluar dhe mirëmbajtje.