csstidy 因长期不维护、不支持现代 css 语法(如自定义属性、嵌套、@layer)、静默丢弃规则、解析错误且性能差,已被 postcss+cssnano 或 lightningcss 等更稳定可控的工具替代。

CSSTidy 为什么现在很少人用了
它确实能压缩和格式化 CSS,但现代构建链路里,csstidy 已被更稳定、更可控的工具替代。核心问题是:不维护多年,对 CSS 新语法(如自定义属性、嵌套、层叠层)完全无支持,解析失败时静默丢弃规则,而不是报错——这在 CI/CD 中极危险。
常见错误现象:CSSTidy 处理含 --color-primary 的文件后,整段变量声明消失;用 @layer 分组后,输出 CSS 里只剩空规则块。
- 2019 年后官方仓库已归档,最后一次发布是 2018 年 v1.7
- 不识别
calc()中的单位混合写法(如calc(1rem + 4px)),可能错误折叠为calc(1rem) - 对 IE 兼容前缀(
-ms-transform)会擅自删掉,且不警告
替代方案选哪个:PostCSS + cssnano 还是 lightningcss
取决于你是否已有构建流程。如果用 Webpack/Vite,postcss + cssnano 是最平滑的迁移路径;如果追求极致速度且愿意换工具链,lightningcss(Rust 实现)压缩率更高、解析更准,但需适配其配置格式。
性能影响明显:lightningcss 处理 50KB CSS 文件平均耗时 12ms,而 csstidy 在同等机器上约 320ms,且结果体积大 18%。
立即学习“前端免费学习笔记(深入)”;
Delphi是美国Borland公司推出的一种基于客户/服务器体系的Windows快速应用开发工具(RAD Rapid Application Development),是一种面向对象的可视化编程工具,即根据Delphi的可视性,又结合Object Pascal 语言的编程技巧,可以开发出功能强大的Windows应用程序和数据库应用程序。 Delphi是第一个集可视化开发环境、优化的源代码编译器和可扩展的数据库访问引擎于一身的Windows开发工具。
-
cssnano默认开启安全压缩,保留所有合法新语法,可配preset: 'default'或'advanced' -
lightningcss不支持自定义插件,但内置了minify、scope、drafts等开关,开箱即用 - 两者都支持 sourcemap,
csstidy完全不支持
真要硬上 CSSTidy,怎么避免踩坑
仅建议用于遗留项目中一次性清理老 CSS(IE8–9 时代代码),且必须加校验步骤。别把它放进 watch 或 build 流程。
使用场景:从一个十年未动的后台系统里导出原始 CSS,想人工 review 前先做基础去重和缩进统一。
- 务必加
-f参数强制格式化,否则默认只压缩,可读性反而更差 - 用
--template=low避免它自动合并选择器(它常把.btn和[data-btn]错误合并) - 处理完立刻用
diff对比原文件,重点检查@media块是否错位、!important是否被移除 - 绝对不要用
--preserve-css—— 文档说“保留注释”,实际会把注释插入到随机位置,破坏 BEM 命名注释结构
压缩后 CSS 为啥反而变大了
这是 csstidy 的典型副作用:它把多行简写属性(如 margin: 0 1em 2px;)强行拆成四行 margin-top/margin-right 等,还补全浏览器默认值(margin-bottom: 0;),尤其在用过 normalize.css 的项目里特别明显。
参数差异直接决定结果:-b(beautify)模式下体积膨胀最狠;-m(minify)稍好,但仍不如现代工具。
- 测试显示:某 24KB 的 Bootstrap 3 衍生 CSS,经
csstidy -m后变为27.3KB;同一文件用cssnano压至18.6KB - 它无法识别
currentColor,会替换成rgb(0, 0, 0),增加冗余字节 - 对字体族名中的引号处理混乱,
font-family: "Helvetica Neue"可能变成font-family: Helvetica Neue,引发回退风险










