@layer 是为失控级联装上的开关，将不可预测的优先级变为可声明、可预测、可审计的结构；它要求首行声明、依赖插件支持、需规范引入第三方样式，并不改变层内特异性规则。
@layer 不是“修 bug 的胶水”，而是给失控的级联重新装上开关——它把原本靠猜、靠试、靠!important硬顶的优先级，变成可声明、可预测、可审计的结构。
为什么旧项目 CSS 层级总像一锅粥？
旧项目里常见三类失控现象：!important 随处开花、.header .nav ul li a.active 这类选择器越写越长、第三方样式（如 Ant Design）一引入就压垮业务规则。根本原因不是开发者水平低，而是传统级联机制在长期迭代中彻底失序：浏览器只能靠特异性（0,1,1,0）和加载顺序硬算，没人能说清哪条规则最终生效。
@layer reset, base, components; 必须放在第一行
这是所有后续有效的前提。一旦开头出现任何非 @layer 声明（哪怕是一行 @import 或一个 body { }），整个文件后续所有 @layer 都被浏览器静默忽略——DevTools 的 Styles 面板里根本看不到层名，Computed 里也查不到来源。
- 正确写法：
@layer reset, base, vendor, components, overrides;（必须独占一行，且是整个 CSS 文件或<style></style>标签的第一条语句） - 错误写法：
@import "reset.css"; @layer reset;→ reset 层失效 - Vite/webpack 用户需确认已启用
postcss-cascade-layers插件，否则构建时整条@layer语句被删，不报错也不警告
第三方样式不进 layer，就天然比你高一等
直接 <link href="antd.css"> 或 @import "antd.css"; 引入的样式，默认落入「未命名顶层」，优先级高于你所有显式声明的 @layer。这不是 bug，是规范行为。
- 安全做法：
@import url("antd.css") layer(vendor);（注意：是顶层语句，不能套在@layer vendor { }里面） - 老库不支持
layer()导入？手动复制其 CSS 内容，粘贴进@layer vendor { /* paste here */ } - 某些现代库（如 Chakra UI v2.8+）已原生导出
@layer chakra;，但要核对层名是否与你项目中的@layer vendor冲突
写了 @layer custom 就以为能无条件覆盖 .ant-btn？别信
@layer 只管层间胜负，不管层内打架。同一层里，#modal .ant-btn（0,1,1,0）依然赢过 .ant-btn.custom（0,0,2,0）。跨层时，@layer custom { .ant-btn } 能压过 @layer vendor { .ant-btn }，但压不过 @layer vendor { #modal .ant-btn }。
- 覆盖高权值第三方规则时，不要只改层，还要同步升级选择器：
@layer custom { .ant-btn.ant-btn-primary.my-theme }比.my-button更可靠 -
!important在跨层场景下完全失效——它只在同层内最强，跨层时层序永远优先 - 打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值和Layer标识，这是唯一真实依据
真正难的不是写对 @layer 语法，而是把散落各处的重置、基础排版、组件样式、工具类，按逻辑重新归位——旧项目里那些没被命名、没被归类、靠加载顺序偶然生效的规则，才是最需要被收编的对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
