როგორ აწყობს კასკადი და მემკვიდრეობა, რომელი სტილები მოქმედებს?

Question

Accepted Answer

როდესაც რამდენიმე წესი შეიძლება სტილიზაცია დაიმოკიდოს, ორი მექანიზმი განსაზღვრავს შედეგს: **კასკადი** (რომელი წესი ვიცი) და **მემკვიდრეობა** (რომელი თვისებები გადაეცემა მშობლებიდან).

## კასკადი — კონფლიქტების გადაწყვეტა, დამდე მიხედვით

თარგმნიშვილი ირჩევს გამარჯვებული განცხადებას შემოწმებით, მიხედვით უმაღლესი პრიორიტეტი:

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

## მემკვიდრეობა — ზოგიერთი თვისება გადაედება შვილებში

გარკვეული თვისებები (ძირითადად **ტექსტი-დაკავშირებული**) ავტომატურად მემკვიდრენ შთამომავლებიდან; უმეტესი არა.

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

**მემკვიდრე** ნაგულისხმევად: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **არ მემკვიდრე**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## მემკვიდრეობის აკონტროლება აშკარად

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

## სპეციფიკა შეხლების კასკადში

ეს არის, რატომ დაბალი სპეციფიკის წესი შეიძლება წაგებული იყოს მაშინაც კი, თუ ის მოგვიანებით გამოიწერება — სპეციფიკა შემოწმებულია *წყაროს რიგამდე*. დამდე (მნიშვნელობა → სპეციფიკა → წყაროს რიგა) გაგება ახსნის თითქმის ყველა "ჩემი სტილი არ მოიქმედა" შემთხვევა.

## რატომ მნიშვნელოვანია

კასკადი და მემკვიდრეობა არის *როგორ განსაზღვრავს CSS ფაქტობრივად* ბირთვი.

პრიორიტეტის რიგის ცოდნა გამართოვს კონფლიქტებს, იცოდეთ რომელი თვისებები მემკვიდრეა, საშუალებას აძლევთ დააყენოთ `color`/`font` ერთხელ `body`-ში ყველგან ნაცვლად, და `inherit`/`initial`/`unset` აძლევთ ზუსტ კონტროლს — ერთად ისინი CSS-ს პროგნოზირებადი გამოიყვანიან სამაგიეროდ.