摘要

  • W3C 于 2021 年 1 月 19 日发布 CSS Cascade Level 5 第一版公开草案，引入 @layer，让作者明确规定不同样式组的顺序。
  • 2022 年 1 月 13 日的候选推荐快照规定：普通声明由靠后的层胜出，!important 声明则由靠前的层胜出。未分层的普通规则进入隐含的最后一层。

按钮的颜色像一场无休止的投票。重置样式想让它安静一点，组件库坚持品牌色，本地补丁又拿出一份周五下午的决定。浏览器当然有办法选出最终值；人类为了让自己的规则赢，往选择器上添类名、加 ID，下一份文件便带着更长的选择器回来。争论的核心其实不在某个按钮。团队没有先商量清楚：重置、库、组件和本地决定，究竟谁有更高的发言权？

W3C 于 2021 年 1 月 19 日发布的第一版公开草案把级联层写入 CSS，并用 @layer 组织有明确顺序的规则组。W3C CSS 工作组的同期公告点出了好处：作者能够排列层级，而不用改写每条选择器、改变层内优先级，或赌样式表碰巧以理想顺序出现。先排座次，再让各桌自己议事。

可以把基础重置放在第一层，共用组件放在下一层，网站自己的调整放在后面的层。普通声明争同一属性时，靠后的层优先。选择器的具体优先级在后续比较中发挥作用。于是，早期层里写得很复杂的一条规则，也可能输给后期层里一条朴素的类选择器。本地选择不必靠堆叠 #id 和 !important 才有声音。

不过 !important 进场时，层级顺序倒了过来。两个重要声明相争，靠前的层获胜。2022 年 1 月 13 日的候选推荐快照在级联排序中明确写出这两种方向：普通规则看后面的层，重要规则看前面的层。排查一个按钮为何变色，必须先问它们比的是普通声明还是重要声明，然后才轮到选择器本身。

没写进显式层的旧样式也有位置。2022 年的规则把它们放进隐含的最后一层；对普通声明而言，这个位置比所有显式层都靠后。一条散落在外面的补丁，仍可能压过精心排好的层级。2021 年 8 月 29 日的工作草案记录了未分层样式排序在早期草案之后的调整。座次表本身也经过修改，不能把一整年所有版本当作同一张图。

8 月草案还记录了 revert-layer：对某个属性退回上一层本会提供的值。层可以嵌套，导入的样式也可以分派到某一层。它们让“这条规则来自哪里、该听谁的”成为可维护的结构，而不是藏在选择器长度里的暗号。

W3C 的发布历史从 2021 年初版草案走到 2022 年初的候选推荐快照。其间具体排序经过修订，核心意图则很稳定：大型网站把来自不同人的样式合在一起，需要能公开表达这些来源之间的优先关系。

浏览器最后仍只会画出一个颜色，选择器在各层内部也仍然有事可做。变化发生在冲突之前：团队先说明重置、组件和本地补丁的座次。周五的补丁照样可以入场，只是不能再假装没有座位表。