@layer 仅在严格按序声明、显式收编第三方样式且不破坏层结构时生效；层名必须置于CSS最顶部，否则被忽略；第三方样式默认落入高优先级未命名顶层，需用layer()导入或手动包裹；层内仍受选择器特异性约束，!important跨层失效。
@layer 不是“加个标签就能覆盖一切”的开关，它只在你严格按顺序声明、显式收编第三方样式、且不破坏层结构的前提下才生效。
为什么 @layer reset; 写在第二行就彻底失效
CSS 解析器遇到第一个非 @layer 规则（比如 * { margin: 0; } 或 .btn { color: red; }）后，会直接忽略后续所有 @layer 声明——包括层名定义和层块内容。DevTools 的 Styles 面板里根本不会显示层名，Computed 面板也查不到层来源。
- 必须把所有层名声明（如
@layer reset, base, components, utilities;）放在整个 CSS 文件或<style>标签的最顶部，前面不能有任何其他 CSS 规则 - 构建工具（Vite/webpack）若未启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条@layer语句，连警告都不报 - 用
@import引入的 CSS 文件里若含@layer，其声明顺序以@import出现位置为准，不是文件加载时间
第三方库样式没进 layer，反而压垮你的自定义规则
没被显式包裹的第三方 CSS（比如直接 <link href="antd.css"> 或 @import "antd.css";）会自动落入「未命名顶层」，优先级高于你所有显式声明的 @layer。这不是 bug，是规范行为。
- 正确做法：用
@import url("antd.css") layer(framework);（注意是顶层语句，不能套在@layer framework { }里面） - 如果库不支持
layer()导入（如老版本 Element Plus），就得手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ } - 某些现代库（如 Chakra UI v2.8+、Bootstrap 5.3+）已原生导出
@layer，但需确认其层名（如@layer chakra）是否与你项目中的冲突
写了 @layer custom 就以为能无条件覆盖 .ant-btn？别信
@layer 只控制「层间」优先级，不豁免「层内」选择器特异性。同一层里，#header .btn（0,1,1,0）依然赢过 .btn.custom（0,0,2,0）；跨层时，@layer custom { .btn } 能压过 @layer framework { .ant-btn }，但压不过 @layer framework { #modal .ant-btn }。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（格式如0,1,0,0） - 覆盖第三方高权值规则时，不要只改层，还要同步升级选择器：比如用
@layer custom { .ant-btn.ant-btn-primary.my-theme }而非.my-button - 禁用
!important：它在跨层场景下完全失效，且会绕过层机制，让规则脱离你的分层设计
响应式断点和伪类写错位置，层内顺序直接翻车
媒体查询和伪类本身不改变层优先级，但它们在层内的书写顺序会影响最终计算结果。比如你在 @layer responsive 里先写 @media (min-width: 768px) { .btn { display: flex; } }，再写 .btn:hover { opacity: 0.8; }，那么悬停态永远在响应式规则之后应用——但如果把 :hover 写进 @media 块内部，它就只在该断点下生效，且顺序可控。
- 推荐结构：
@layer responsive { @media (min-width: 768px) { .btn { ... } .btn:hover { ... } } } - 避免把不同逻辑的规则混在同一层块里：比如把主题色和断点行为都塞进
@layer theme，后期维护时很难定位哪条规则实际生效 - 匿名层（
@layer { ... }）虽快，但无法跨文件复用，大型项目建议统一用命名层
最常被忽略的一点：层序是静态的，无法运行时修改。所谓“动态切换主题”，本质是预定义好 @layer light 和 @layer dark，再靠属性选择器（如 [data-theme="dark"]）或 class 切换来激活对应规则——层本身的声明顺序在构建时就固定了。
