@layer 是唯一能系统性替代 !important 的原生 CSS 方案，通过层间优先级维度绕过选择器权重战争，但必须严格按顺序声明、分层导入且不混用未分层样式，否则静默失效。
@layer 是目前唯一能系统性替代 !important 的原生 CSS 方案，不是“更好用”，而是“从机制上绕过权重战争”——但必须严格按顺序写、分层导入、不混用未分层样式，否则它会静默失效。
为什么 !important 不能靠堆选择器解决，而 @layer 可以
因为 !important 只在同层内生效，跨层无效；@layer 控制的是层间优先级维度，比选择器特异性高一个层级。浏览器计算样式时，先比层序，再比声明顺序，最后才看 0,1,0 这类特异性值。
常见错误现象：你在 @layer custom 里写 .btn { color: red !important; }，却仍被第三方库的 #modal .close-btn { color: blue !important; } 覆盖——那说明它们不在同一层。前者在 custom 层，后者大概率在未分层区域（或 vendor 层但声明顺序更靠后）。
- 验证方法：打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值和Layer标识 - 关键区别：
!important是“同层内最强”，@layer是“跨层定胜负” - 不要试图在
@layer内继续加!important——它破坏分层意图，且无法提升跨层能力
@layer 声明顺序错位导致完全失效
@layer 声明必须位于所有样式规则之前，包括 @import、普通选择器、媒体查询块。一旦解析器遇到非 @layer 的语句，后续所有 @layer 规则都会被忽略——DevTools Styles 面板里根本看不到层名，也不会报错。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：@layer base; 写在 reset.css 文件中间，或夹在两个组件样式块之间；Vite 项目中 @import 第三方 CSS 在 @layer 块外；构建后 CSS 里层名消失，样式回退到传统级联逻辑。
- 正确写法：所有
@layer命名语句集中放在整个 CSS 文件最顶部（或<style>标签第一行） - 例如：
@layer reset, base, vendor, components, overrides;—— 这一行之后才能出现任何@layer reset { ... }块 - 用构建工具时，确认已启用
postcss-cascade-layers插件，否则旧环境会直接丢弃整条@layer规则
第三方 UI 库样式怎么安全塞进指定层
Ant Design、Element Plus 等主流库本身不带 @layer，但你可以用 @layer vendor { @import "xxx.css"; } 强制包裹，让它归属明确层。否则直接 @import 的样式属于“未分层区域”，优先级不可控，可能压垮你后续写的 @layer components。
使用场景：你想让 Ant Design 按钮默认样式（高特异性）被业务主题覆盖，又不想改库源码或手动重写选择器。
- ❌ 错误：
@import "antd/dist/reset.css"; @layer vendor { }——@import不在层内，样式不属任何层 - ✅ 正确：
@layer vendor { @import "antd/dist/reset.css"; } - 更稳妥：把第三方 CSS 内容复制进
@layer vendor { }块内，避免@import加载时序与层解析错位 - 注意：某些新版本库（如 Bootstrap 5.3+）已支持
@layer bootstrap { @import "..."; }，需检查其文档层名是否与你冲突
层内仍要写合理选择器，别幻想“进层就无敌”
@layer 解决的是“谁先谁后”，不是“谁写得弱谁赢”。同一层里，#header .btn（0,1,1,0）依然赢过 .my-button（0,0,1,0）。很多人以为把自定义样式放进 @layer overrides 就能无条件覆盖框架的 .ant-btn-primary，结果失败——其实是框架用了两个类（特异性 0,0,2,0），而你只写了一个类（0,0,1,0）。
- 对策：在目标层内用匹配的选择器，比如
@layer overrides { .ant-btn.my-theme { ... } } - 验证方法：DevTools → Computed → 看被划掉规则的
Specificity值，对比你写的规则是否足够 - 别用
!important补救——它会让规则脱离层控制流，下次换主题或抽离样式时会出问题
真正难的不是写对 @layer 语法，而是把整个项目的样式加载链路理清楚：哪些是第三方、哪些是基础重置、哪些是业务组件、哪些是动态主题——每一类都得预分配层名，且不能漏掉任何一条 @import 或内联 style。
