🎨 CSS @layer：用「层叠优先级」终结样式打架的世纪难题

CSS 冷门知识点｜工程化实战 | 你还在用 !important 互相伤害、用选择器权重「数数」来赌谁的样式生效吗？@layer 是 CSS 原生给出的「优先级分层」方案------从此样式表之间不再是丛林法则，而是有秩序的分层管理。

🎯 问题场景

一个真实的线上事故：团队 A 维护基础组件库（button 的默认样式），团队 B 负责业务页面，需要覆盖按钮颜色。两套样式都被打包进最终产物：

css 复制代码

/* 组件库 base.css */
.btn { background: #1677ff; color: #fff; }

/* 业务 custom.css */
.btn { background: #52c41a; }

结果：按钮时而蓝、时而绿 。原因很简单------打包顺序一变，后加载的样式就赢了。于是有人开始写 !important：

css 复制代码

.btn { background: #52c41a !important; }

然后组件库作者不服，也加 !important......再然后，全局搜索 !important 查出 40 多处，没人敢删。更离谱的是，权重计算还得考虑 id、内联样式、:hover 状态，团队里没人能准确说出「这条样式到底会不会生效」。

🔍 原因分析

CSS 决定「谁生效」靠的是层叠（Cascade），核心规则有三条，按优先级从高到低：

来源与重要性 ：用户代理（浏览器默认）→ 用户 → 作者（开发者）；!important 会反转这一顺序
选择器特异性（权重） ：#id > .class > 标签
源码顺序：同权重下，后写的胜出

问题就出在：所有开发者写的样式都混在同一个「作者来源」里 ，只能靠权重和加载顺序决斗。而 !important 是「核武器」，一旦使用就跳出了正常规则，导致整个优先级体系崩坏。

@layer 的出现，就是给「作者来源」内部再细分出有明确顺序的层级 ------层叠层的优先级高于特异性 ，但低于 !important。

💡 解决方案：@layer 三层搞定

第一步：声明层顺序（顺序即优先级，越靠后越优先）

css 复制代码

/* layer.css ------ 必须先于所有样式加载 */
@layer reset, components, utilities, overrides;

这一行定义了 4 个层的优先级：overrides > utilities > components > reset。无论这些层的样式在文件里写在什么位置、以什么顺序加载，优先级都按这里的声明走。

第二步：把样式归入对应层

css 复制代码

/* components 层 */
@layer components {
  .btn { background: #1677ff; color: #fff; }
}

/* overrides 层 ------ 业务侧覆盖 */
@layer overrides {
  .btn { background: #52c41a; }
}

现在业务样式永远赢过组件库样式，跟打包顺序、文件加载顺序完全无关。没有 !important，没有权重焦虑。

第三步：兼容第三方库（关键技巧）

第三方库（如 Element Plus、Antd）的样式没法改，怎么把它们塞进层里？用 @import 的 layer() 语法：

css 复制代码

/* 把整个 UI 库降级到 components 层 */
@import url("antd.css") layer(components);

注意：@import 必须写在所有规则之前（@layer 声明之后也可以，但必须在任何样式规则前）。

第四步：无层样式 = 最高优先级（默认层陷阱）

没被任何 @layer 包裹的样式，优先级高于所有层内样式 （相当于隐式的最高层）。所以如果第三方库的样式没被 layer() 包裹，它依然会压过你的层内覆盖------这时再用 layer() 包裹即可，或者把「必须赢」的少量样式故意留在层外。

css 复制代码

/* 层内 */
@layer components { .btn { color: red; } }
/* 层外 ------ 无条件优先于层内 */
.btn { color: blue; }

浏览器支持

Chrome 99+、Firefox 97+、Safari 15.4+ 均已支持，2022 年后基本可以放心用。低版本可以用 PostCSS 插件 postcss-layer 做降级处理（把层内样式包一层 :where() 降低权重模拟）。

✅ 要点总结

@layer 的顺序 = 优先级：先声明的层优先级低，后声明的层优先级高，与源码位置、加载顺序无关
层内特异性仍然有效 ：层内 #id 依然赢 .class，层间才看层序
!important 依然凌驾于层之上 ：它仍然会跳出层规则，所以不要因为有了 @layer 就随意用
无层样式默认最高 ：想让某条样式「绝对生效」，留在层外即可，比 !important 优雅得多
@import ... layer(name)：是收编第三方库样式的唯一正规途径
落地建议 ：新项目在入口处声明 @layer reset, components, utilities, overrides;，并约定「组件库进 components、业务覆盖进 overrides」，从此告别选择器权重数数大赛