CSS @layer — จัดการ specificity โดยไม่ต้องแข่ง selector

@layer จัดกลุ่ม CSS เป็น “ชั้น” (layer) ที่มีลำดับความสำคัญที่ควบคุมได้ ชั้นที่ประกาศทีหลังชนะเสมอ โดยไม่สนใจ specificity ของ selector

/* ประกาศลำดับ layer ก่อน */
@layer base, components, utilities;

/* base ถูก override ได้ง่ายเพราะอยู่ล่างสุดในลำดับ */
@layer base {
  h1 { font-size: 2rem; color: #0f172a; }
}

/* components อยู่กลาง */
@layer components {
  .card h1 { font-size: 1.25rem; }   /* ชนะ base.h1 แม้ specificity เท่ากัน */
}

/* utilities ชนะทุกอย่างใน layer */
@layer utilities {
  .text-sm { font-size: 0.875rem; }
}

ทำไมถึงสำคัญ: ปัญหา specificity war เกิดจากพยายาม override สิ่งที่มี specificity สูง @layer แก้ปัญหาโดยควบคุมระดับ ไม่ใช่ specificity — เหมือน z-index แต่สำหรับ cascade

กับ third-party CSS:

@layer vendor {
  @import url('bootstrap.css');  /* ขยับ bootstrap ลงชั้นต่ำ override ได้ง่าย */
}

@layer components {
  .btn { /* นี่ชนะ bootstrap.btn เสมอ */ }
}

รองรับ Chrome 99+, Firefox 97+, Safari 15.4+