直接合并重复css声明比压缩html更有效减小体积，因冗余多藏于class而非标签间；需通过computed面板对比元素属性、搜索高频声明组合、识别伪类/媒体查询中重复项，并优先提取通用class复用，避免破坏语义、specificity及覆盖顺序。
直接合并重复的CSS声明，比压缩HTML更有效减小体积——因为样式冗余往往藏在class里，而不是标签间。
怎么识别重复的CSS样式
不是看HTML里写了几个style属性，而是看最终生效的CSS规则是否重复。比如多个元素都设了color: #333;、font-size: 14px;、margin: 0;，但分散在不同class或内联样式中，这就是可合并的“同类项”。
- 用浏览器开发者工具的
Computed面板，选中不同元素，对比color、font-family等常用属性值是否一致 - 搜索项目里高频出现的声明组合，例如
display: block; margin: 0; padding: 0;很可能在多个class里重复定义 - 注意伪类和媒体查询里的重复：
.btn:hover { color: blue; }和.link:hover { color: blue; }就是可提取的同类项
合并时优先提取通用class，而不是删掉已有class
强行把class="header-text"和class="article-title"改成同一个class名，容易破坏语义和JS钩子。更稳妥的做法是保留原有class，再额外加一个通用class承载共用样式。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 原写法：
<p class="header-text">标题</p> <h2 class="article-title">正文标题</h2> - 改后：
<p class="header-text text-base">标题</p> <h2 class="article-title text-base">正文标题</h2> -
.text-base { color: #333; line-height: 1.5; font-weight: normal; }单独定义，复用率高且不影响原有逻辑
避免合并后破坏 specificity 或覆盖顺序
合并不是简单拼接CSS规则，顺序和选择器权重会直接影响最终渲染。比如你把两个.card的规则合并成一条，但其中一个原本靠后、本意是覆盖前一个，合并后就没了覆盖效果。
- 检查源码中相同选择器是否出现在多个CSS文件里，尤其是
main.css和override.css这类命名的文件 - 不要把
#sidebar .item和.item强行合并——前者权重更高，合并后可能让所有.item都带上侧边栏专属样式 - 用
!important收尾的声明，基本意味着它本就不该被合并；遇到就先标记，留到人工 review 阶段处理
构建阶段自动合并的边界在哪
PostCSS插件如cssnano能安全合并background简写、margin四值缩写等，但无法判断.btn-primary和.cta-button是否真该归为一类。自动化只管语法层面，语义层面必须人来定。
-
mergeLonghand（开启）：把margin-top: 10px; margin-right: 5px;转成margin: 10px 5px 0 0;——安全 -
mergeRules（慎开）：把两个.icon规则合并——可能出错，除非你确认它们完全等价且无条件分支 - 如果项目用了CSS-in-JS（如Emotion），合并动作得放在JS层做，不能依赖纯CSS工具
真正省体积的关键不在“压多少字节”，而在“删掉哪些本不该存在”的样式——比如一个font-weight: 400;被写了17次，只因没人统一过基础文本默认值。这种问题，工具扫不出来，得靠人眼通读一遍base.css。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
