რა არის cascade layers (@layer) და :is/:where selector?

Question

Accepted Answer

ეს ფუნქციები გაძლევთ ამ explicit კონტროლს **cascade** და **specificity** - პირდაპირ მოაგვარებთ specificity-ომის ხელოვნებას დიდი codebase-ებში.

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

`@layer` საშუალებას გაძლევთ განსაზღვროთ დასახელებული layers, რომელთა რიგი *თქვენ* კონტროლირებთ. გვიან layer-ში სტილი ადრეულ layer-ებს უძლევს **specificity-ის მიუხედავად**:

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

მაგალითი: დაბალი specificity მქონე utility მაღალ layer-ში შეიძლება გადაფაროს მაღალი specificity მქონე rule დაბალ layer-ში. ეს ნიშნავს რომ აღარ გჭირდებათ `!important` ან selector hacks-ები override რიგის მართვისთვის - თქვენ ორგანიზებთ CSS-ს layer-ებად (reset → framework → components → overrides) და რიგი პროგნოზირებადია.

## :where() — ნულოვანი specificity

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` დაემთხვება მის არგუმენტებს მაგრამ არ ამატებს **specificity**-ს - იდეალური დეფოლტებისა და reset-ებისთვის რომელიც ნებისმიერმა ადვილად შეიძლება გადაფაროს:

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — ერთი მეთოდით დამთხვევა, აღებს უმაღლესი specificity

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` აკოტავებს დიდ selector list-ებს (როგორც `:where()`) მაგრამ **ამატებს** specificity-ს (მისი ყველაზე კონკრეტული არგუმენტისა). ასე რომ `:is()` grouping-ისთვის როდესაც გინდათ ნორმალური წონა; `:where()` როდესაც გინდათ რომ გადაფაროს.

## :is vs :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```