CSS @layer: ngừng chiến tranh !important, kiểm soát specificity rõ ràng

TL;DR

@layer là at-rule CSS cho phép bạn khai báo các cascade layers — những "bucket ưu tiên" tường minh nằm trên specificity trong thuật toán cascade. Một khi đã khai báo @layer reset, defaults, components, utilities; ở đầu stylesheet, mọi rule trong utilities sẽ thắng rule trong reset — kể cả khi reset dùng #id còn utilities dùng *. Specificity chỉ còn việc giải quyết xung đột trong cùng một layer.

Tại sao @layer quan trọng

Trong ~25 năm, developer CSS phải "hack" specificity: chèn selector dư thừa (body .card .title), lạm dụng !important, hoặc bôi ID khắp nơi chỉ để override một property. Vấn đề cốt lõi: CSS cũ trộn lẫn việc chọn element với việc đặt ưu tiên.

@layer tách hai việc đó. Layer = ưu tiên. Selector = element match. Bạn khai báo thứ tự một lần, ở một chỗ, và toàn bộ kiến trúc CSS chảy theo.

Cú pháp trong 30 giây

Khai báo thứ tự layer ở đầu file (layer đầu tiên = yếu nhất, layer cuối = mạnh nhất):

@layer reset, defaults, framework, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer utilities {
  .p-0 { padding: 0; }
}

Import cả stylesheet vào một layer — rất hữu ích khi "hạ cấp" thư viện bên thứ ba:

@import url('bootstrap.css') layer(bootstrap);

Nest để tổ chức theo chiều sâu:

@layer framework.layout {
  .grid { display: grid; }
}

7 fact kỹ thuật cần nhớ

1. Thứ tự layer cố định khi xuất hiện lần đầu — không reorder được sau đó. Hãy khai báo toàn bộ thứ tự ở dòng đầu của CSS.
2. Unlayered styles luôn mạnh nhất trong các style thường — đây là quyết định backwards-compat của CSSWG để code cũ không vỡ.
3. !important đảo ngược toàn bộ thứ tự layer — !important trong layer đầu sẽ thắng !important trong layer cuối. Dùng để "cân bằng quyền lực", không phải để boost ưu tiên.
4. Nesting vô hạn qua block syntax hoặc dot notation (framework.layout). Tên layer scoped theo parent — không đụng nhau giữa các group.
5. revert-layer — keyword mới, roll back property về layer trước đó (không phải về origin trước đó như revert).
6. Anonymous layers (@layer { ... }) chiếm một vị trí trong thứ tự nhưng không thể append thêm style — tiện cho library ẩn internal layering.
7. Cascade order 2026: origin & importance → context → inline style → cascade layers → specificity → source order.

Use cases thực tế

1. Tích hợp thư viện bên thứ ba không phải đánh nhau

Import Bootstrap, Tailwind, Flickity vào một layer thấp; code của bạn ở layer cao hơn. Override mọi thứ, không cần !important. Miriam Suzanne (tác giả spec) gọi đây là "lý do immediately compelling" nhất để adopt.

2. Kiến trúc ITCSS native

Thay vì dùng naming convention, cast ITCSS thẳng vào browser: @layer reset, defaults, themes, patterns, layouts, components, utilities;. Mỗi tầng tự biết vị trí của mình.

3. Theming không đau

Nest theme layers và hoán đổi thứ tự để switch theme:

@layer themes.default, themes.custom;
/* muốn đổi? chỉ cần: */
@layer themes.custom, themes.default;

4. Design system với public API

Design system có thể expose named layers (system.reboot, system.grid, system.components). Consumer chèn layer riêng vào giữa — không phải fork hay override bạo lực.

Gotchas & limitations

• !important reversal là footgun số 1 — nhiều dev nhầm là bug. Đây là design intent: !important không còn là "priority hack", nó là signal "style này thiết yếu, đừng override".
• Unlayered = highest — nếu bạn quên layer một file trong khi code khác đều layered, file quên đó sẽ override mọi thứ. Có thể gây debug khó chịu.
• Không phải công cụ scoping — cascade layers chỉ quản lý ưu tiên, không giới hạn selector "chỉ apply trong .card". Dùng @scope cho việc đó.
• Không reorder được sau khi declare — plan kỹ từ đầu.
• Anonymous layers đóng kín — không append thêm style được.
• Trình duyệt cũ bỏ qua cả block @layer — không có graceful fallback native. Dùng PostCSS polyfill nếu cần hỗ trợ.

Browser support

Baseline: Widely Available từ tháng 3/2022. Usage toàn cầu hiện ~95.3% (caniuse, Feb 2026). Chi tiết:

What's next

Cascade layers đã thành nền tảng trong các CSS framework mới: Panda CSS, Open Props, một số bản Tailwind v4+ đều ship explicit layers. Tooling ecosystem tiếp theo đang giải quyết hai mảnh còn thiếu:

• @scope đã ship — kết hợp với layers, bạn có đủ bộ đôi để thay thế BEM ở đa số dự án.
• layer attribute trên <link> đang ở giai đoạn proposal — nếu ship, sẽ cho phép layer stylesheet từ HTML mà không cần @import (có perf cost).

Bottom line: nếu đang khởi động dự án CSS mới năm 2026, khai báo layer order từ dòng đầu. Không còn lý do để trì hoãn.

Nguồn: MDN @layer, CSS-Tricks guide (Miriam Suzanne), Smashing Magazine, Can I Use.