提取共享CSS时如何避免规则顺序错乱并实现HTML优化？

背景 #

某个流程生成的多个HTML文件中，<style>元素（包含CSS）可能出现在任意位置（甚至<head>元素外），这是有意设计而非bug，无需纠结其非标准性。

优化目标 #

对这类HTML文件做后处理，实现两个目标：

1. 将所有<style>元素移至<head>内（已通过DOM操作库完成）；
2. 提取通用CSS到共享外部CSS文件，但提取时会出现规则覆盖问题，示例如下：

步骤1处理后（所有<style>按原顺序移至<head>） #

test1.html

..
<head>
    <style> h1 { color: red } </style>
    <style> h2 { color: blue } </style>
    <style> h3 { color: green } </style>
</head>
..

test2.html

..
<head>
    <style> h1 { color: red } </style>
    <style> h2 { color: purple } h3 { color: yellow } </style>
    <style> h3 { color: green } </style>
    <!-- 注：h3最终显示为绿色 -->
</head>
..

步骤2处理后（当前提取方式的问题） #

shared.css

h1 { color: red }
h3 { color: green }

test1.html

..
<head>
    <link rel="stylesheet" href="shared.css">
    <style> h2 { color: blue } </style>
</head>
..

test2.html

..
<head>
    <link rel="stylesheet" href="shared.css">
    <style> h2 { color: purple } h3 { color: yellow } </style>
    <!-- 问题：h3现在显示为黄色，但原本应该是绿色 -->
</head>
..

核心问题 #

如何在不破坏CSS规则优先级顺序的前提下，完成HTML优化？目前有两种初步方案：

1. 仅提取第一个非通用块之前的共享CSS（比如示例中只提取h1 { color: red }）；
2. 通过解析器生成有效CSS，移除被覆盖的声明，保留未共享的覆盖规则。

方案1：仅提取首个非通用块前的共享CSS #

这个方案的核心是严格遵循原CSS块的加载顺序，只提取所有HTML文件中相同位置的相同CSS块，直到遇到第一个不一致的块为止。

具体步骤：

1. 收集所有处理后的HTML文件（已将<style>移至<head>），按顺序提取每个文件中的<style>块内容；
2. 从第一个<style>块开始，对比所有文件的对应位置块内容：
   • 如果所有文件的该块内容完全一致，将其加入shared.css；
   • 如果出现不一致的块，停止提取，后续所有块保留在各自HTML的<style>中；
3. 替换所有HTML中的已提取块为<link rel="stylesheet" href="shared.css">，保留未提取的<style>块在原顺序位置。

针对示例的效果：

• shared.css仅包含h1 { color: red }；
• test1.html保留后两个<style>块：<style> h2 { color: blue } </style>和<style> h3 { color: green } </style>；
• test2.html保留后两个<style>块：<style> h2 { color: purple } h3 { color: yellow } </style>和<style> h3 { color: green } </style>；
• 这样完全保留了原有的规则顺序和优先级，不会出现覆盖问题。

优缺点：

• 优点：实现简单，无需解析CSS规则，完全保证原优先级；
• 缺点：可能无法最大化提取通用CSS，比如示例中的h3 { color: green }虽然是通用规则，但因为位置在非通用块之后，无法被提取。

方案2：解析CSS规则，智能提取并保留有效覆盖 #

这个方案需要解析每个CSS块的具体规则，跟踪每个选择器的最终生效声明，然后区分通用规则和每个文件特有的覆盖规则。

具体步骤：

1. 对每个HTML文件，按顺序解析所有<style>块中的CSS规则，生成该文件的最终生效规则集（考虑顺序覆盖，相同选择器后面的声明覆盖前面的）；
2. 对比所有文件的最终生效规则集，提取所有文件都一致的声明作为shared.css的内容；
3. 对每个文件，生成差异化规则集：即该文件中与shared.css不一致的声明，以及在原顺序中覆盖了shared.css规则的声明；
4. 将每个HTML中的原有<style>块替换为<link rel="stylesheet" href="shared.css">加上包含差异化规则集的<style>块，确保差异化规则在shared.css之后加载，保证覆盖优先级。

针对示例的处理：

1. 生成各文件最终生效规则：
   • test1.html：h1:red、h2:blue、h3:green；
   • test2.html：h1:red、h2:purple、h3:green；
2. 提取通用规则到shared.css：h1 { color: red }、h3 { color: green }；
3. 生成差异化规则：
   • test1.html：h2 { color: blue }；
   • test2.html：h2 { color: purple }；
4. 最终HTML：
   • test1.html：<link> + <style> h2 { color: blue } </style>；
   • test2.html：<link> + <style> h2 { color: purple } </style>；
   • 此时h3的规则在shared.css中，不会被test2的原有中间块覆盖，完全符合原效果。

关键实现细节：

• 需要使用成熟的CSS解析库（比如PostCSS、csstree）来解析、合并和对比规则；
• 处理选择器的优先级：如果存在相同选择器但不同优先级的规则，需要优先保留优先级高的规则，再判断是否通用；
• 要保留原规则的顺序逻辑：如果某个文件中后面的规则是对shared.css规则的覆盖，必须将该覆盖规则保留在HTML的<style>中，且放在<link>之后。

优缺点：

• 优点：能最大化提取通用CSS，同时保证最终显示效果与原文件一致；
• 缺点：实现复杂度高，需要处理CSS选择器优先级、!important等特殊情况。

选择建议 #

• 如果追求实现简单、风险低，优先选方案1，适合CSS块数量不多、非通用块出现较早的场景；
• 如果追求最大程度的性能优化（减少重复CSS、降低HTML体积），可以选方案2，适合有大量通用CSS规则、且愿意投入开发成本处理解析逻辑的场景。

内容的提问来源于stack exchange，提问作者Christian