首选cssminifier.com在线压缩,省心无注册广告;构建推荐clean-css,稳定可控;现代项目用postcss+cssnano;老项目可用csstidy;压缩前务必linter校验。

在线工具选 cssminifier.com 最省心
它不强制注册、没广告干扰,粘贴即压,支持保留或删除注释、是否压缩 @import、是否合并重复选择器等细粒度开关。压缩后直接显示体积对比和字符数变化,能一眼看出收益。注意别勾选「Remove empty rules」——有些预处理器生成的空规则(比如条件编译后留下的)删掉会导致样式丢失。
构建流程里用 clean-css 更可控
如果你在 Gulp 或 Webpack 里做自动化构建,clean-css 是目前最稳定的 CLI 和 API 方案。它默认不删掉 !important 后的空格,也不乱动 calc() 里的空格,避免 Safari 旧版本解析失败。常见坑点:level: { 1: { specialComments: 0 } } 这个配置必须显式设,否则会误删版权注释;另外 inline: ['local'] 开启后可能把字体文件 base64 内联进去,导致 CSS 文件暴增,慎开。
postcss + cssnano 适合现代项目
当项目已用 PostCSS(比如搭配 Tailwind 或 Autoprefixer),加一个 cssnano 插件就行,无需额外引入构建逻辑。它默认启用安全压缩:不会合并 .foo + .bar 和 .foo+.bar 这类易歧义的选择器,也不会简化 rgba(0,0,0,0.5) 成 hsla() 等潜在兼容问题写法。但要注意 cssnano v6 起默认关掉了 discardDuplicates,得手动打开才能去重,否则多个 @layer 块里的相同规则仍会保留。
本地 CLI 工具里 csstidy 仍有不可替代性
它对老旧 IE 兼容语法(比如 *property、_property)处理更保守,不会因为“不认识”就删掉;还能输出语法错误定位,比多数在线工具强。缺点是不维护多年,不支持 container query 或 color-mix() 等新特性,遇到就报错退出。所以只建议压存量老项目,新项目别用。
margin: 0 0 0; 这种漏写单位的错误会被压缩器照单全收,上线后才在某个浏览器里失效。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











