CSS代码重构工具：自动化优化旧项目样式

本文深入剖析了老旧CSS项目重构中的关键陷阱与实战策略，强调安全扁平化@import需通过postcss-import展开+stylelint冲突检测而非粗暴删除，警示cssnano激进压缩（如mergeLonghand、normalizeWhitespace）易破坏层叠逻辑和IE11/Safari等兼容性细节，指出动态类名识别必须结合ast-grep静态分析与运行时日志验证，并揭示字体异常多源于font-weight:normal等“看似冗余”属性被误删——真正有效的CSS重构不是追求极致压缩或代码整洁，而是在浏览器兼容性毛细血管中精准识别、隔离并控制每一个潜在失控点。

旧 CSS 里大量 @import 嵌套，怎么安全扁平化？

直接删掉嵌套 @import 会炸样式优先级，尤其当被导入文件里有 !important 或同名选择器时。真正要做的不是“删”，而是“提取+重排”。

• 先用 postcss-import + postcss-cli 把所有 @import 内联展开（注意加 --root 指定入口路径）
• 展开后立刻跑 stylelint + selector-no-vendor-prefix 等规则，暴露隐藏的冲突
• 重点检查 :not()、[attr] 类复合选择器是否因展开顺序错位导致失效——这是最常漏掉的坑

PostCSS 插件选 cssnano 还是 clean-css？

cssnano 默认启用 discardDuplicates 和 mergeLonghand，对老项目反而危险：它会把 margin: 0; margin-top: 10px; 合成 margin: 10px 0 0;，但若原代码靠层叠覆盖全局重置，这就直接破布局。

• 老项目建议关掉 mergeLonghand 和 normalizeWhitespace，只留 discardComments 和 reduceTransforms
• clean-css 更保守，但不支持 PostCSS 生态链式调用；如果构建流程已用 Webpack，优先配 css-minimizer-webpack-plugin 并手动传 { level: { 1: { specialComments: false } } }
• 别信“压缩率高=好”，cssnano 的 svgo 子模块还会偷偷优化内联 SVG，可能让 IE11 下图标消失

如何识别“看似可删、实则被 JS 动态拼接”的类名？

搜索 className +=、classList.add(、$(".xxx") 很容易漏掉字符串模板里的变量拼接，比如 el.classList.add(`btn-${type}-primary`) —— 这种类名不会出现在任何 CSS 文件里，但删了对应规则就白屏。

• 用 grep -r "\$\{.*\}" src/ --include="*.js" --include="*.ts" 扫描所有带插值的类名生成逻辑
• 再配合 ast-grep 查 class.*[+-]=|\.add\(.*\+ 模式，比正则更准
• 临时加一行 console.log("used class:", className) 到公共 class 处理函数里，跑一遍核心用户路径，比静态分析靠谱

重构后发现某些页面字体突然变细或行高错乱

这八成是 font-weight 或 line-height 被 cssnano 的 normalizeWhitespace 或 postcss-discard-empty 误删了——它们会把 font-weight: normal; 当冗余清掉，但浏览器默认 font-weight 是 normal，而某些字体（如苹方、SF Pro）在 normal 下实际渲染为 400，显着比 300 细。

• 检查输出 CSS 里是否还有 font-weight: normal，没有就说明被删了
• 在 cssnano 配置里加 normalizeWhitespace: { removeEmpty: false }，或直接禁用该插件
• 更稳妥的是把关键排版属性（font-weight, line-height, letter-spacing）写进 :root 变量，用 postcss-custom-properties 提前注入，避免被压缩逻辑盯上

老项目 CSS 的“坏味道”往往藏在浏览器兼容性毛细血管里，而不是语法层面。动一个 @import 顺序，可能让某个安卓 WebView 下的伪元素消失；删一行空格，可能让 Safari 的 flex wrap 行为突变。重构不是追求干净，是控制失控点。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~