@layer (Cascade Layers) là gì?

@layer chia CSS thành các tầng có thứ tự cố định, và thứ tự tầng được xét trước specificity.

/* khai báo thứ tự trước — dòng này quyết định tất cả */
@layer reset, base, components, utilities;

@layer base       { a { color: blue; } }
@layer components { .link { color: green; } }
@layer utilities  { .text-red { color: red; } }

Một selector element trong utilities vẫn thắng một selector #id trong base — vì layer được so trước.

Công dụng thực tế nhất là kiểm soát (ghi đè) CSS của thư viện ngoài:

@layer vendor, app;
@import url('bootstrap.css') layer(vendor);
@layer app { .btn { background: var(--accent-solid); } }   /* ghi đè, không cần !important */

Lưu ý 1: CSS không nằm trong layer nào có ưu tiên cao hơn mọi layer. Xếp utilities ở cuối vẫn không thắng nổi một dòng CSS cũ nằm ngoài layer.

Lưu ý 2: với !important, thứ tự đảo ngược — layer khai báo sớm lại thắng. Quy tắc này ngược với trực giác nhưng nhất quán: !important vốn là cách tầng nền tảng giữ được giá trị nó đặt ra.

Chốt: nói được hai bẫy trên là dấu hiệu đã dùng @layer thật, không chỉ đọc qua.