如果您曾经在大型 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 架构进步，提供了浏览器强制的级联控制，而以前需要脆弱的约定和持续的纪律。