CSS 层叠层解决组件库与业务样式优先级冲突

组件库和业务样式同时存在时，最稳妥的解决办法不是不断增加选择器层级，而是先用 CSS 层叠层（Cascade Layers）划定“谁可以覆盖谁”。把第三方组件库放进较早的 vendor 层，把业务修正放进更晚的 overrides 层；同层内再处理选择器特异性。这样，业务规则通常不需要 !important，也不必复制组件库的长选择器。

先把“选择器谁更强”改成“层级谁先赢”

CSS 处理同一属性时，会先比较来源和重要性，再比较层叠层，之后才进入选择器特异性和源码顺序。对普通的作者样式来说，后声明的层优先级更高；没有放入任何命名层的普通规则则处在隐式的最后层，往往会压过命名层里的普通规则。

因此，项目入口可以先固定一份清晰的层级协议：

/* 先固定层顺序，后续文件只能填充这些层。 */
@layer reset, vendor, components, utilities, overrides;

/* 基础规则只负责归零，不抢业务组件的职责。 */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

/* 业务修正放在最后，优先级来自层而不是选择器加权。 */
@layer overrides {
  .checkout-button { border-radius: 8px; }
}

这里的关键不是把所有 CSS 都塞进一个层，而是让层名表达责任边界。vendor 只承载外部依赖，components 负责自己的默认外观，overrides 才是经过评估的业务例外。

把组件库纳入 vendor 层，再建立业务覆盖层

如果组件库通过独立 CSS 文件引入，应在其他规则之前完成带层的导入。这样第三方选择器即使写得很长，也只在 vendor 层内部竞争，业务层不需要模仿它的路径。

/* @import 必须位于其他样式规则之前。 */
@layer reset, vendor, components, utilities, overrides;
@import url("ui-kit.css") layer(vendor);

@layer components {
  .card { padding: 16px; color: #243247; }
}

@layer overrides {
  /* 同为普通作者规则，overrides 层晚于 vendor 和 components。 */
  .checkout .card { padding: 20px; }
  .checkout-button { background: #1769e0; }
}

迁移旧项目时，可以先把组件库包裹进 vendor，再把原本散落的业务补丁归并到 overrides。不要只把一条“修复颜色”的规则移动过去，却把同文件里影响布局、状态和响应式的规则留在未分层区域；那会让后续排查出现两套优先级体系。

三类边界要单独处理

层叠层能解决大量“业务规则改不动”的问题，但它不是绕过所有 CSS 规则的总开关。迁移时至少检查下面三类边界：

如果只想撤销当前层提供的值，可以考虑 revert-layer，它和回退到浏览器默认值的 revert 不是一回事。生产项目中更建议把它限制在有明确注释的组件边界里，避免读者需要跨多个 CSS 文件猜测最终值。

用检查清单完成一次可回滚迁移

1. 列出组件库、基础样式、组件默认值、工具类和业务补丁各自的来源文件。
2. 在入口文件声明层顺序，先导入 vendor，再迁移业务层。
3. 挑选按钮、表单、弹窗三类容易冲突的组件，比较层名和计算样式，而不只是看源码顺序。
4. 记录仍需 !important 或内联样式的例外，并给每条例外写出撤销条件。
5. 分批删除旧的高特异性补丁，保留一组可回退的提交，确认主题、响应式和交互状态都没有回到默认值。

判断层叠层是否真正生效，看的是规则组织是否可预测：新的业务修正应当有明确落点，组件库升级也不应要求全项目重新堆叠选择器。选择器仍然重要，但它应该解决同一层内部的精细匹配，而不是承担跨团队的优先级谈判。

常见问题

CSS 层叠层能完全替代 !important 吗？

不能。它能减少因为层级不清造成的 !important，但重要声明、内联样式和用户代理规则仍有自己的比较顺序。先调整层和组件契约，再保留确有语义的例外。

为什么业务规则放进 overrides 层后仍然没有覆盖？

先检查两条规则是否同属普通作者样式，再看业务规则是否真的进入命名层；如果第三方值来自内联样式或重要声明，单纯提高层顺序不会改变结果。

@layer 的顺序可以靠文件加载顺序临时解决吗？

可以工作，但不适合作为长期协议。显式的 @layer a, b, c; 把顺序写在入口处，组件库增删文件时更容易审查和回滚。