Apa itu cascade layers (@layer) dan :is/:where selectors?

Question

Accepted Answer

Fitur ini memberi Anda kontrol eksplisit atas **cascade** dan **specificity** — secara langsung mengatasi masalah specificity-war dalam codebase besar.

## Mengapa ini penting

`@layer` memungkinkan Anda menentukan layer bernama yang urutan **Anda** kontrol. Style dalam layer yang lebih baru mengalahkan layer sebelumnya **terlepas dari 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 */
```

Kekuatan: utility low-specificity di layer tinggi dapat mengalahkan aturan high-specificity di layer rendah. Ini berarti Anda tidak lagi memerlukan `!important` atau selector hacks untuk mengelola urutan override — Anda menyusun CSS menjadi layer (reset → framework → components → overrides) dan urutannya dapat diprediksi.

## :where() — zero specificity

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

`:where()` cocok dengan argumennya tetapi menambahkan **tanpa specificity** — sempurna untuk default/reset yang dapat dengan mudah diganti oleh siapa saja :

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

## :is() — matching yang sama, mengambil specificity tertinggi

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

`:is()` mempersingkat daftar selector panjang (seperti `:where()`) tetapi **berkontribusi** pada specificity (dari argumen paling spesifik). Jadi `:is()` untuk grouping saat Anda menginginkan bobot normal; `:where()` saat Anda menginginkannya dapat ditimpa.

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

Bersama-sama ini mengatasi masalah pemeliharaan CSS yang paling sulit — **specificity tidak terkontrol**. `@layer` membuat urutan override eksplisit dan disengaja (tidak ada lagi escalation `!important`), `:where()` menulis reset/default yang tidak akan pernah melawan Anda, dan `:is()` menjaga selector kompleks tetap DRY.

Mereka adalah alat fundamental untuk arsitektur CSS yang scalable dan framework-friendly.