Cascade layers (@layer) และ :is/:where selectors คืออะไร?

Question

IT Interview Practice · Accepted Answer

คุณลักษณะเหล่านี้ให้คุณควบคุม **cascade** และ **specificity** อย่างชัดเจน — โดยแก้ไขปัญหาสงครามความเฉพาะเจาะจงในฐานโค้ดขนาดใหญ่โดยตรง

## @layer — การจัดลำดับ cascade ที่ชัดเจน

`@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 */
```

พลัง: utility ที่มี specificity ต่ำในเลเยอร์สูงสามารถแทนที่กฎที่มี specificity สูงในเลเยอร์ต่ำได้ ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ `!important` หรือเทคนิคตัวเลือกเพื่อจัดการลำดับการแทนที่อีกต่อไป — คุณจัดระเบียบ CSS ลงในเลเยอร์ (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()` ย่อรายการตัวเลือกที่ยาว (เช่น `:where()`) แต่ **มีส่วนร่วม** specificity (ของอาร์กิวเมนต์ที่เฉพาะเจาะจงที่สุด) ดังนั้นใช้ `:is()` สำหรับการจัดกลุ่มเมื่อคุณต้องการน้ำหนักปกติ; `: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) */
```

## เหตุใดจึงมีความสำคัญ

โดยรวมแล้ว สิ่งเหล่านี้แก้ปัญหาการบำรุงรักษา CSS ที่ยากที่สุด — **specificity ที่ไม่ได้ควบคุม** `@layer` ทำให้ลำดับการแทนที่ชัดเจนและมีจุดประสงค์ (ไม่มี `!important` escalation อีกต่อไป) `:where()` เขียน reset/ค่าเริ่มต้นที่ไม่เคยปะทะกับคุณ และ `:is()` เก็บตัวเลือกที่ซับซ้อน DRY

เป็นเครื่องมือพื้นฐานสำหรับสถาปัตยกรรม CSS ที่ปรับขนาดได้และเป็นมิตรต่อเฟรมเวิร์ก

@layer — การจัดลำดับ cascade ที่ชัดเจน

:where() — ศูนย์ specificity

:is() — การจับคู่เดียวกัน รับ specificity สูงสุด

:is vs :where

เหตุใดจึงมีความสำคัญ

คำถามที่เกี่ยวข้อง