CSS Cascade Layers 该用起来了：把样式优先级从博弈变成分层

写 CSS 最烦的不是写样式，是猜哪个规则赢了。第三方库的 .btn 覆盖了你的 .btn，你只能加 !important，然后下一层又得加更长的选择器。Cascade Layers 把这个游戏规则换了：优先级由层声明，不由选择器权重决定。

基本原理

用 @layer 声明层的顺序，后声明的层优先级更高，与选择器权重无关。层内的规则照常按权重比较，但层与层之间是硬性的上下级关系。

一套实用的四层结构

最低层放第三方库：Bootstrap、Ant Design 这些你不想改也不该改的。第二层放设计系统基础：颜色、字体、间距 token 和基础组件。第三层放项目自定义：业务组件和页面级样式。最高层放 override：临时修复和特定场景覆盖。

这样第三方库永远在你的样式之下，不需要 !important，也不需要写 .my-app .btn.btn-primary 这种长选择器。

和 Tailwind 的配合

Tailwind 自带 layer 体系（base、components、utilities），把它当作中间层，你的自定义样式放在它上面，冲突就自然消解了。过去所谓「Tailwind 和自定义 CSS 打架」的问题，本质上就是缺少分层。

迁移顺序

不要一次改完。先声明层结构，把第三方库的引入包进 @layer vendor，跑一遍回归；再把设计 token 挪进 base 层；最后处理散落的 override。每步都能独立回滚。

浏览器支持

2023 年起所有主流浏览器都支持了，2026 年没有任何理由不用。IE 早就不是考虑对象。

本文由奇幻维度内容助手整理发布，欢迎在评论区交流你的看法。

第三方库放最低层这个思路解决了我一直以来的痛点，不用再写 .my-app .btn.btn-primary 这种长选择器。和 Tailwind 的 layer 配合那段很实用，本质上冲突就是缺了分层。

四层结构里我会多加一层放设计系统的 token 和原子类，否则组件库升级时又得回去调层顺序。还有个细节：layer 的顺序只在第一次声明时生效，入口文件里把所有 @layer 一次列全，别散在各组件里。

分层确实比一味堆优先级数字要清楚。我们迁移时踩过一个坑：第三方组件库的样式没进 layer，结果它反而压在所有层上面，只能单独套一层再排顺序。迁移前先盘点外部样式来源。