როგორ გამოითვლება CSS specificity?

Question

Accepted Answer

როდესაც მრავალი წესი ერთსა და იმავე ელემენტს გეზავისკენ დაფუძნებულია, **specificity** წყვეტს რომელი მოიგებს. ეს არის ქულა, რომელიც გამოითვლება სელექტორის ნაწილებიდან და შედარებულია ტუპლად `(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)
```

დაამთავრეთ მარცხნიდან მარჯვნივ; პირველი სვეტი, რომელიც განსხვავდება, წყვეტს გამარჯვებულს.

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

## ძირითადი წესები

- ერთი **id** აღემატება ნებისმიერი რაოდენობის **კლასებს**; ერთი კლასი აღემატება ნებისმიერი რაოდენობის ელემენტებს. (არ შეიძლება "დამატება" დაბალი დონეები უმაღლესი დონის დასაჩაგრად.)
- თუ specificity **ტოლია**, წესი, რომელიც გამოჩნდება **შემდეგ** წყაროში, იმარჯვებს (წყაროს რიგი).
- **`!important`** აბათილებს ნორმალურ specificity-ს სრულად — ეს არის ბოლო საშუალო, რომელიც ძნელი აბათილება (დაგჭირდებთ სხვა `!important` უმაღლესი specificity-ით).

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

## პრაქტიკული მითითებები

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

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

მრავალი "რატომ არ ვრცელდება ჩემი CSS?" განწუხოება არის specificity კონფლიქტი — უფრო სპეციფიკური წესი სხვა ადგილას იმარჯვებს.

სელექტორების დაბალი და ბრტყელი შენახვა (უპირატესობა ერთეულის კლასებს, თავს აარიდეთ ids და `!important`) specificity-ს პროგნოზირებადს ინარჩუნებს, რათა სტილი ადვილად დაბრუნდეს და შენარჩუნდეს.