安全扁平化旧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 行为突变。重构不是追求干净，是控制失控点。
