Menene cascade layers (@layer) da :is/:where selectors?

Question

Accepted Answer

Waɗannan siffoyi suna ba ka sarari da zuriya kan **cascade** da **specificity** — kaɗai fito ga matsalar yaki-specificity a manyan tsarin code.

## Me take ya maɗa mahimmanci

`@layer` yana ba ka ability na ayyana layers da aka suna tare da umarni da **ka** kula **kai**: Siffoyi a waje layer suna yaki da farko layers **ko da kuma 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 */
```

Ĵikaru: ƙaramin-specificity ikon a babbar layer na iya damre babbar-specificity dokar a cikin ƙananan layer. Wannan yana nuna cewa ba ka bukatar `!important` ko selector hacks don sarrafa tsarin damre — ka shirya CSS cikin layers (maimaita → framework → abubuwa → damre) kuma tsari ya zama gaskiya.

## :where() — sifili specificity

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

`:where()` yana daidai da `arguments` amma baba **babu specificity** — kyau don defaults/resets tun kowa na iya damre sau daure:

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

## :is() — daidai daidai, ɗauki sifi mafi girma

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

`:is()` yana damre jerin selectorin doggo (kamar `:where()`) amma **gida** yana taimakawa specificity (na kiyafsa argument mafi cikakke). Sabili `:is()` don shirye lokacin da ka so nauyi na yau-a-ran ; `:where()` a yau-a-ran da ka so damre.

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

Jamau waɗannan suna warware matsala mafi wahala na CSS — **jiya-le-le specificity**. `@layer` ya sanya umarni damre a sarari da niyya (babu kari `!important`), `:where()` yana rubuta maimaita/defaults waɗanda ba za su yi yaki da kai ba, kuma `:is()` yana kula da masu saurari selectorin DRY.

Su abubuwa na asali ne don resizable, CSS architecture mai-niyya-kwakwalwa.