Apa iku cascade layers (@layer) lan selektore :is/:where?

Question

Accepted Answer

Fitur-fitur iki menehi kontrol eksplisit terhadap **cascade** lan **specificity** — ngatasi langsung masalah perang specificity ing codebase gedhe.

## Kenapa iki penting

`@layer` ngidini sampeyan nggawe layer sing jenenge, lan urutane *sampeyan* sing kontrol. Gaya ing layer sesudahe ngalahake layer sadurunge **ora perlu nggatekake 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 */
```

Kuwatene: utility karo specificity kurang ing layer inggil bisa ngganti aturan karo specificity dhuwur ing layer kurang. Iki tegese sampeyan ora perlu nggunakake `!important` utawa hack selector kanggo ngatur urutan override — sampeyan atur CSS dadi layer (reset → framework → components → overrides) lan urutane bisa diprediksi.

## :where() — specificity nol

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

`:where()` cocog karo argumen-e nanging nambah **ora ana specificity** — cocok kanggo default/reset sing bisa siapa-siapa ngganti nang gampang:

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

## :is() — cocog sama, njupuk specificity paling dhuwur

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

`:is()` panyendek daftar selector panjang (kaya `:where()`) nanging **nambah** specificity (sing paling spesifik saka argumen-e). Dadi gunakake `:is()` kanggo grouping nalika sampeyan pengin bobot normal; `:where()` nalika sampeyan pengin bisa diganti.

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