← 返回首页

CSS 格式化

美化或压缩 CSS 代码,支持缩进风格选择。

CSS格式化 是什么?

CSS格式化工具把压缩成一整行的样式表重新排版,或者反过来把带缩进、注释的CSS压成一行。浏览器本地跑,不上传代码。常见场景:从CDN下载的bootstrap.min.css只有1行、约20万字符,编辑器里根本没法读,粘进来选"格式化"、缩进2空格,立刻变成可折叠的层级结构;改完再切"压缩",去掉注释和空白,体积能回到原始min文件的±1%以内。写样式时也可以用它统一缩进风格,避免团队里2空格和4空格混用。

使用步骤

  1. 把CSS代码粘贴进左侧输入框,或直接把.css文件拖到编辑区,支持一次处理约1MB以内的文本。
  2. 选择模式:"格式化"用于展开阅读,"压缩"用于产出发布版本,两者可来回切换。
  3. 设置缩进,默认2个空格,也可选4个空格或Tab;压缩模式可选是否保留最后的分号。
  4. 点击"格式化"或"压缩"按钮,右侧输出区即时显示结果,大文件约0.2-0.5秒完成。
  5. 用"复制"按钮把结果写入剪贴板,或点"下载"保存为style.min.css。
  6. 若结果异常,先检查输入是否含未闭合的{或},工具会保留原样并在控制台提示位置。

对比:用它还是手工做?

对比维度本工具手工/替代做法
处理12KB CSS耗时约0.2秒,点一下出结果手工删空格换行约5-10分钟,还容易漏
压缩率去注释+空白,通常省20%-40%只删换行约省10%,注释还在
缩进一致性统一2/4空格或Tab,全文件一致多人协作常混用2空格和4空格
大文件可读性20万字符的min.css展开成层级树编辑器里一行到底,基本没法读
隐私本地JS处理,无网络请求在线网站可能上传到服务器

常见问题

压缩后能小多少?

典型项目里,去掉注释、换行、多余空格和最后分号,体积通常减少20%-40%。例如一份12KB的手写CSS,压缩后约7.5KB;已经min过的文件再压只能省1%-3%,因为可去的空白已经没了。gzip之后差距更小,所以别指望压缩CSS能替代gzip。

会改动选择器或属性值吗?

不会。工具只处理空白、注释和分号,不改选择器名、属性名和值。但要注意:压缩会删掉/* */注释,如果你用注释做hack(比如/*! 保留 */),需在压缩选项里勾选保留感叹号注释,否则会被一并删除。

支持CSS嵌套和@规则吗?

支持标准@规则,包括@media、@supports、@keyframes、@font-face、@import。缩进会按嵌套层级递进,@media内的规则比外层多一级。原生CSS嵌套(&选择器)也能正确缩进,但工具不做语法校验,写错的嵌套会原样输出。

处理大文件会卡吗?

1MB以内的CSS基本在0.5秒内完成,因为解析在浏览器主线程做。超过2MB(约等于未压缩的bootstrap加几个组件库)可能卡顿1-2秒。如果文件超过5MB,建议先用构建工具拆分,或只粘贴要改的那一段。

代码会被上传吗?

不会。整个解析和输出都在浏览器里用JavaScript完成,没有网络请求,断网也能用。你可以打开开发者工具的Network面板验证:点格式化按钮时不会产生任何XHR或fetch。关掉页面,代码就没了,不留缓存。

能恢复压缩前的样子吗?

不能完全恢复。压缩是有损的:注释、换行位置、属性间的空格都丢了,格式化只能按规则重新缩进,无法还原你原来的排版习惯。所以建议保留源文件,压缩版只用于部署。若只想要可读版本,直接对源文件格式化即可。

适用范围:标准CSS 2.1及CSS Nesting、@layer等较新语法,不处理SCSS/LESS的变量和mixin,遇到$var或@mixin会原样保留但不解析。压缩只做空白和注释层面的处理,不做属性合并、颜色缩写等优化,所以压缩率有上限。所有计算在浏览器本地完成,代码不上传、不落盘,关闭页面即清除。

浙ICP备2026073450号