Dự án lớn có reset, thư viện, component và utility đè lẫn nhau khó lường. `@layer` giải quyết thế nào và bẫy khi dùng là gì?

@layer thêm một tầng trên cả specificity: cascade so sánh thứ tự layer trước, chỉ khi cùng layer mới xét độ cụ thể.

Nhờ đó trật tự đè do kiến trúc quyết định, không do ai viết selector dài hơn.

@layer reset, vendor, components, utilities;   /* order declared once, up front */

@layer components { #app .btn { padding: 12px 20px; } }  /* (1,1,0) */
@layer utilities  { .p-0 { padding: 0; } }               /* (0,1,0) but wins */

Một class trong layer sau thắng một selector có #id ở layer trước — đây chính là thứ giúp utility class hoạt động mà không cần !important.

Quy tắc cần nhớ:

• Khai báo thứ tự một lần ở đầu file; layer nhắc lại sau đó chỉ bổ sung nội dung, không đổi vị trí. Layer chưa khai báo trước sẽ xếp theo lần xuất hiện đầu tiên.
• CSS không nằm trong layer nào (unlayered) có độ ưu tiên cao hơn mọi layer. Đây là bẫy hay gặp: nhét reset vào layer rồi ngạc nhiên vì CSS cũ ngoài layer vẫn đè.
• Với !important, thứ tự layer đảo ngược: layer khai báo sớm lại thắng.
• Có thể gán layer khi import: @import url(vendor.css) layer(vendor); — cách gọn để hạ toàn bộ CSS thư viện xuống.
• Layer lồng nhau viết @layer components.card { }.

Khi nhận dự án legacy, chiến lược an toàn là bọc CSS thư viện vào layer thấp trước, giữ CSS ứng dụng ở ngoài layer, rồi mới dần chuyển vào layer riêng.