如果您曾經在大型 CSS 專案中經歷過特殊性戰爭 - 覆蓋第三方樣式、散佈 !important 聲明，或者重組 HTML 只是為了贏得級聯 - @layer 就是您一直在等待的解決方案。 CSS @layer at 規則使開發人員能夠明確控制級聯順序，而與特殊性或來源順序無關。
@layer之前的級聯問題
在 @layer 之前，级联管理完全依赖于约定：BEM 命名、SMACSS 类别、ITCSS 架构。这些约定有效，但浏览器并未强制执行。第三方 CSS 可能會覆蓋精心設計的元件樣式，而來源順序脆弱性意味著單一 <link> 標籤重新排序可能會破壞整個設計系統。
/* Without @layer: specificity battles */
.card { background: blue; } /* 0,1,0 */
body .card { background: red; } /* 0,1,1 — wins by specificity */
.card { background: blue !important; } /* escalation */
@layer 的工作原理
@layer 允許您將樣式分組到命名圖層中並定義它們的優先權。後面的圖層中的樣式會覆蓋前面的圖層，無論其中選擇器的特殊性如何。
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer components {
.btn { background: var(--color-primary); padding: 0.5rem 1rem; }
}
@layer utilities {
.mt-4 { margin-top: 1rem; }
}
| 特色 | 效益 |
|---|---|
| 層優先級 | 無論特殊性如何，後面的層都會勝過前面的層 |
| 嵌套層 | @layer framework.base { } 建立子層層次結構 |
| 匿名層 | @layer { } 用於隔離未命名的第三方代碼 |
@import 整合 | 佔位符_1 |
層架構策略
最常見且有效的層架構遵循四層模型：重置、基礎、元件和實用程式。
@layer reset, base, components, utilities;
@layer reset {
/* normalize.css or custom reset */
}
@layer base {
/* typography, links, global styles */
}
@layer components {
/* card, button, form — reusable patterns */
}
@layer utilities {
/* spacing, display, text alignment — single-purpose classes */
}
對於使用 Tailwind 或 Bootstrap 的項目，將框架樣式包裝在低優先層中，並在其上方分層自訂樣式：
@import url("tailwind.css") layer(tailwind);
@import url("bootstrap.css") layer(bootstrap);
@layer base, components, tailwind, bootstrap;
這可確保您的自訂 base 和 components 樣式始終覆蓋框架預設值，而無需進行特殊性駭客攻擊。
層內特異性控制
在層內部，正常的特異性規則仍然適用。層順序與選擇器特異性正交。關鍵見解：@layer 提供_頂層排序_，而特異性控制_層內優先權_。
@layer components {
.btn { background: blue; } /* 0,1,0 */
.btn.primary { background: green; } /* 0,2,0 — wins within layer */
}
@layer utilities {
.bg-red { background: red; } /* 0,1,0 but in later layer */
}
/* .bg-red wins over .btn because utilities comes after components */
請注意，!important 會反轉圖層優先權 — 較早圖層中的 !important 會覆寫較後圖層中的 !important。謹慎使用這些知識；目標是完全消除 !important 。
從 BEM 和 SMACSS 遷移
將現有程式碼庫移轉到 @layer 最好是逐步完成。首先將重置和基本樣式包裝在命名層中，然後逐步移動元件和實用程式。
/* Phase 1: wrap existing CSS in layers */
@layer reset { @import url("reset.css"); }
@layer base { @import url("base.css"); }
@layer components { @import url("components.css"); }
@layer utilities { @import url("utilities.css"); }
使用 PostCSS 外掛程式 postcss-layer 自動包裝舊文件。每个阶段后运行视觉回归测试，以确认没有意外的变化。全球瀏覽器對 @layer 的支援率超過 95%（Chrome 99+、Firefox 97+、Safari 15.4+），使其在 2024 年可以安全用於生產。 @layer at 規則是多年來最重要的 CSS 架構進步，提供了瀏覽器強制的級聯控制，而以前需要脆弱的約定和持續的紀律。