CSS代码重构工具_如何利用自动化脚本优化旧项目样式

安全扁平化旧css的@import需提取重排而非直接删除：先用postcss-import展开，再用stylelint检查复合选择器冲突；cssnano慎用mergelonghand等激进压缩；动态类名需ast-grep+运行时日志识别；字体异常多因font-weight被误删，应禁用对应压缩或改用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 行为突变。重构不是追求干净，是控制失控点。