Si kaskada dhe trashëgimia vendosin se cilat stile zbatohen?

Question

Accepted Answer

Kur disa rregulla mund ta stilizojnë një element, dy mekanizma vendosin rezultatin: **kaskada** (cili rregull fiton) dhe **trashëgimia** (cilat veti kalojnë nga prindërit).

## Kaskada — zgjidhja e konflikteve, në rend

Shfletuesi zgjedh deklarimin fitues duke kontrolluar, sipas rendit të përparësisë:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Trashëgimia — disa veti kalojnë tek fëmijët

Disa veti (kryesisht **të lidhura me tekstin**) trashëgohen automatikisht nga përbijtësit; shumica nuk janë.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Trashëgohet** si parazgjedhje: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Nuk trashëgohej**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Kontrollimi i trashëgimisë në mënyrë eksplicite

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Përmbledhje specificiteti brenda kaskadës

Eto pse një rregull me specificittet të ulët mund të humbë edhe nëse është shkruar më vonë — specificiteti kontrollohet *para* rendit të burimit. Të kuptosh rendin (rëndësi → specificiteti → rendi i burimit) shpjegon pothuajse çdo rast "stili im nuk zbatohet".

## Pse ka rëndësi

Kaskada dhe trashëgimia janë modeli bazë i *si CSS vërtet zgjidhet*.

Të njohësh rendin e përparësisë rregullon konfliktët, të njohësh cilat veti trashëgohej të lejon të vendosësh `color`/`font` një herë në `body` në vend të kudo, dhe `inherit`/`initial`/`unset` të japin kontroll të saktë — së bashku janë ajo që bën CSS të parashikueshme në vend të magjike.