CSS Formatter 与 Selector 合并：级联顺序 (Cascade)、选择器权重 (Specificity) 与样式覆盖风险

一、问题概述：格式化与压缩的职责越界

格式化器 (Formatter) 的目标是提高源码可读性，严格保留 CSS 规则的声明顺序与语义；压缩合并器 (Minifier) 的目标是减少字符体积。当优化工具跨规则将同名选择器合并或重新排序时，若两个选择器权重相同，后声明的规则可能被提前，导致原本正常生效的样式被意外覆盖。

二、最小复现：同权重选择器的源码顺序颠倒

下面的 CSS 声明中，.btn-primary 与 .btn-danger 权重均为 (0,1,0)。当两者同时作用于一个按钮元素时，位于样式表靠后的规则优先级更高。若压缩合并阶段颠倒了顺序，视觉样式将发生改变。

/* 源码顺序：.btn-danger 靠后，当同时具备两个类名时显示红色 */
.btn-primary { background-color: #007bff; }
.btn-danger { background-color: #dc3545; }

/* 错误重排产物：颠倒源码顺序导致 .btn-primary 意外覆盖了 .btn-danger */
.btn-danger { background-color: #dc3545; }
.btn-primary { background-color: #007bff; }

三、根因：Cascade Order 与 Specificity 的协同机制

CSS 浏览器级联判定依次遵循：(1) 来源与重要性 (!important), (2) 特异性/权重 (Specificity), (3) 源码出现顺序 (Source Order)。在 Specificity 相同的情况下，完全由 Source Order 决定胜者。不具备 DOM 语义上下文的 CSS 工具若擅自重排选择器，就会破坏依附于源码顺序的级联逻辑。

四、推荐方案：格式化不越界，压缩使用安全合并模式

开发阶段仅使用 Prettier 或 Stylelint 等工具进行缩进美化，禁用跨规则的选择器重排与合并。在构建阶段使用 Clean-CSS 或 cssnano 时，开启 safe 模式或关闭不安全的选择器合并选项；同时推荐结合 BEM 或 CSS Modules 减少对全局源码顺序覆盖的依赖。

五、完整代码：选择器 Specificity 权重计算与源顺序安全检查

下面的 TypeScript 函数模拟简单 CSS 选择器的 Specificity 计算 (id, class/attr/pseudo, type)，并判断调换两个选择器的源码顺序是否会带来级联覆盖风险。

type Specificity = [number, number, number];

function calculateSimpleSpecificity(selector: string): Specificity {
  let ids = 0;
  let classes = 0;
  let types = 0;

  const clean = selector.trim();
  const idMatches = clean.match(/#[a-zA-Z0-9_-]+/g);
  if (idMatches) ids = idMatches.length;

  const classMatches = clean.match(/\.[a-zA-Z0-9_-]+/g);
  if (classMatches) classes = classMatches.length;

  const attrMatches = clean.match(/\[[^\]]+\]/g);
  if (attrMatches) classes += attrMatches.length;

  const pseudoClasses = clean.match(/:[a-zA-Z0-9_-]+/g);
  if (pseudoClasses) classes += pseudoClasses.length;

  const typeMatches = clean
    .replace(/#[a-zA-Z0-9_-]+/g, "")
    .replace(/\.[a-zA-Z0-9_-]+/g, "")
    .replace(/\[[^\]]+\]/g, "")
    .replace(/:[a-zA-Z0-9_-]+/g, "")
    .match(/[a-zA-Z0-9_-]+/g);
  if (typeMatches) types = typeMatches.length;

  return [ids, classes, types];
}

function compareSpecificity(a: Specificity, b: Specificity): number {
  if (a[0] !== b[0]) return a[0] - b[0];
  if (a[1] !== b[1]) return a[1] - b[1];
  return a[2] - b[2];
}

function isSafeToReorder(sel1: string, sel2: string): boolean {
  const spec1 = calculateSimpleSpecificity(sel1);
  const spec2 = calculateSimpleSpecificity(sel2);
  return compareSpecificity(spec1, spec2) !== 0;
}

console.log(calculateSimpleSpecificity("#nav .item.active a")); // [1, 2, 2]
console.log(isSafeToReorder(".btn-primary", ".btn-danger")); // false (权重均为 [0, 1, 0]，重排不安全)

六、常见错误方案

把所有规则按字母顺序重新排列以追求“美观”；在产生样式覆盖冲突时盲目给规则追加 !important 临时止血；误以为 CSS 格式化工具可以安全承担代码体积优化的重任。

七、边界条件：CSS Layer (@layer)、伪类与 :is() / :where()

现代 CSS 引入 @layer 后，级联层声明顺序优先级高于普通源码顺序；:where() 选择器权重固定为 (0,0,0)，而 :is() 则取参数列表中最高权重。在计算 Specificity 与分析合并安全边界时，必须包含这些现代 CSS 语法规则。

八、如何验证样式重排安全性

配置 Stylelint 禁止危险的 selector 重排；在真实浏览器中比较重排前后的计算样式、层叠顺序和关键页面截图，并覆盖响应式断点与交互状态。

九、FAQ

问：CSS Formatter 会改变选择器顺序吗？答：标准的格式化工具（如 Prettier）只调整缩进和换行，绝不修改选择器顺序或代码语义。

问：为什么两个权重完全相同的 Class 覆盖结果不同？答：因为 CSS Cascade 规定在权重相同的情况下，源码中后出现的规则覆盖先出现的规则。

问：何时才能安全地合并同名选择器？答：仅当同名选择器连续出现，或中间没有任何覆盖范围交叉的竞争规则时，才可以进行合并。

十、总结

明确隔离 CSS Formatter 与 Minifier 的职责界限。格式化专注于提升代码可读性，而压缩优化器在尝试合并或重排选择器时必须严格遵守 Cascade 级联顺序与 Specificity 权重规则。