@layer 声明必须位于CSS文件最顶部，仅允许前置空行或注释；否则后续所有@layer被解析器硬性忽略，第三方样式默认落入未命名顶层，优先级高于显式层。
@layer 声明必须出现在所有样式规则之前，否则整条规则被浏览器忽略——这不是兼容性问题，是解析器硬性截断。
为什么 @layer reset, base, components; 必须写在 CSS 文件最顶行
浏览器 CSS 解析器遇到第一个非 @layer 的普通规则（比如 body { } 或 .btn { }）后，就停止接受后续任何 @layer 声明。哪怕只多一个空格、一行注释、甚至一个 @import，都会导致后面所有 @layer 失效。
- 错误写法：
@import "reset.css"; @layer base;→@layer base被忽略 - 错误写法：
/* 全局变量 */ :root { --color: #000; } @layer components { }→@layer components不生效 - 正确写法：CSS 文件开头三行只能是
@layer声明或空行/注释（且注释不能带样式内容） - 构建工具中需确认 PostCSS 插件（如
postcss-cascade-layers）已启用，否则旧版浏览器环境会直接丢弃整条@layer语句
第三方 CSS 怎么进层：用 @import url() layer()，别套 @layer { @import }
直接 @import "antd.css" 或 <link rel="stylesheet"> 引入的样式，不会归属到任何显式层，而是落入「未命名顶层」，优先级高于所有你声明的 @layer —— 这是最常翻车的点。
- ❌ 错误：
@layer framework { @import "bootstrap.css"; }→ 语法非法，整个@layer framework块被忽略 - ✅ 正确：
@import "bootstrap.css" layer(framework);（必须是顶层语句，和@layer reset;并列） - ⚠️ 注意：若框架自身 CSS 里已含
@layer（如新版 Chakra UI），要检查层名是否与你声明的冲突，否则可能合并失败或覆盖异常 - ? 更稳妥方案：把第三方 CSS 内容复制粘贴进
@layer framework { /* paste here */ }，彻底规避加载时序和嵌套限制
@layer 内部仍要认真写选择器，别幻想“进高层=免死”
@layer 控制的是层间顺序，不是层内豁免权。同一层里，#header .btn 依然赢过 .btn.primary，哪怕后者在更高层。
立即学习“前端免费学习笔记（深入）”；
- 现象：你写了
@layer custom { .my-btn { color: red; } }，但 Ant Design 的.ant-btn-primary没被覆盖 - 原因：Ant Design 实际用的是
.ant-btn.ant-btn-primary（特异性 0,0,2,0），而你的.my-btn是 0,0,1,0 - 验证方法：DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（如0,0,2,0） - 对策：
@layer custom { .ant-btn.my-theme { color: red; } }，靠提升本层内选择器权重来赢，而不是依赖层序 - 别滥用
!important：它会绕过层机制，让规则脱离控制流，破坏整个分层设计意图
真正难的不是写对 @layer 语法，而是把第三方库、响应式断点、主题切换、动态组件样式全部塞进同一套层序里——稍有错位，隐式顶层就反杀全场。
