Cascade layer (@layer) và selector :is/:where là gì?

Question

Accepted Answer

Các tính năng này cho bạn quyền điều khiển tường minh đối với **cascade** và **specificity** — tấn công trực tiếp vào vấn đề chiến tranh specificity trong các codebase lớn.

## @layer — sắp xếp cascade tường minh

`@layer` cho phép bạn định nghĩa các layer được đặt tên mà thứ tự do *bạn* điều khiển. Style trong một layer sau đánh bại các layer trước **bất kể specificity**:

```css
@layer reset, base, components, utilities; /* khai báo thứ tự: sau = ưu tiên cao hơn */

@layer base {
  a { color: blue; }            /* dù cái này được định nghĩa... */
}
@layer components {
  .link { color: green; }       /* ...cái này thắng vì `components` > `base`, */
}                                /* dù bản thân .link không cụ thể hơn */
```

Sức mạnh: một utility specificity thấp ở một layer cao có thể ghi đè một rule specificity cao ở một layer thấp. Điều này nghĩa là bạn không còn cần `!important` hay thủ thuật selector để quản lý thứ tự ghi đè — bạn tổ chức CSS thành các layer (reset → framework → components → overrides) và thứ tự là dễ đoán.

## :where() — specificity bằng không

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

`:where()` khớp các đối số của nó nhưng thêm **không có specificity** — hoàn hảo cho default/reset mà ai cũng dễ ghi đè:

```css
:where(ul) { margin: 0; } /* một reset mà BẤT KỲ rule sau nào cũng đánh bại dễ dàng */
```

## :is() — khớp giống vậy, lấy specificity cao nhất

```css
:is(h1, h2, h3) a { } /* khớp cùng các phần tử, nhưng specificity = đối số cụ thể nhất */
```

`:is()` rút gọn danh sách selector dài (như `:where()`) nhưng **có** đóng góp specificity (của đối số cụ thể nhất). Vậy nên dùng `:is()` để nhóm khi bạn muốn trọng số bình thường; `:where()` khi bạn muốn nó có thể ghi đè được.

## :is vs :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (cái #id được tính) */
:where(#id, .class) p { }/* specificity: 0,0,0 (luôn bằng không) */
```

## Tại sao điều này quan trọng

Cùng nhau, các tính năng này giải quyết vấn đề bảo trì khó nhất của CSS — **specificity không kiểm soát được**. `@layer` làm cho thứ tự ghi đè trở nên tường minh và có chủ đích (không còn leo thang `!important`), `:where()` viết reset/default không bao giờ chống lại bạn, và `:is()` giữ các selector phức tạp DRY.

Chúng là các công cụ nền tảng cho kiến trúc CSS có khả năng mở rộng, thân thiện với framework.