CSS 格式化与压缩

什么是 CSS 格式化？#

CSS 格式化器做的是两件看似相反、实则同源的事：把机器生成、挤成一坨的 CSS 展开成人能读的样子，以及把一份写得太散的样式表压成真正有用的字节数。你之所以会需要它，几乎都是因为 CSS 到你手里时“形状不对”——构建工具吐了一行压缩代码、你想查其中某条规则，或者手写文件越改越大、发布前想先瘦身。

本页两个方向都用的是真正的引擎。**Format（格式化）**用 js-beautify 的 css_beautify，把选择器和声明按可预测的方式重新缩进。Minify（压缩）用的是 CSSO——一个真正的结构优化器，而不是只会删空白的工具：它会合并声明完全相同的相邻规则、把长属性折成简写、去掉被覆盖的无效声明，最后才折叠剩下的空白。结果通常比 naive 的压缩器更小，而且语义和输入完全一致。当你真在乎线上那几个字节时，这条差别就是全部意义。

怎么用#

1. 把 CSS 粘进左侧 CSS 框。Sample 会加载一段示例样式表。
2. 在工具栏选 Indent（缩进）：2、4 或 tab。现代通行是 2 空格；4 空格更适合阅读密集文件。
3. 点一个操作按钮：
   • Format —— 用 js-beautify 重新缩进、换行。选择器各自一行，声明在大括号里对齐。
   • Minify —— 先跑 CSSO 的结构优化，再吐紧凑输出。注释会被删掉，重复规则会合并，能安全折叠的长属性会变成简写。
4. 在右侧 Output 框查看，Copy 复制。Clear 清空两边。

如果输入有未闭合的规则或写坏的声明，状态栏会报错，而不是瞎猜一个结果。

主要特性#

• 格式化与压缩用不同引擎。 美化用 js-beautify，压缩用 CSSO。各自干自己擅长的那一件事，而不是拿一个两头不讨好的例程硬撑。
• 压缩是真正的优化。 CSSO 会重构样式表——把 .a{color:red} .b{color:red} 合并成共享规则，把 margin:0 0 0 0 折成 margin:0，删掉被后一条规则覆盖的声明。删空白是最后一步，不是唯一的一步。
• 三种缩进。 2 空格、4 空格、tab，一个菜单切换。
• 左右双栏、复制就绪。 输入可编辑，输出只读，一键复制。
• 完全在浏览器端。 CSSO 和 js-beautify 都打包进本页，仅在你打开本工具时加载。样式表在浏览器里处理，不上传。

实例演示#

一段小样式表，两条规则在重复劳动、长属性其实可以更短：

输入：

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

选 2 空格，点 Format：

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

重复现在一目了然——这正是格式化器的价值。再对同一份输入点 Minify，CSSO 会做结构重写：

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

三件事同时发生：四个值都相等的 padding 折成了一个值；四个 margin-* 长属性折成了 margin 简写；两条 color: #ff0000 合并成了用组合选择器的一条规则（hex 还换成了更短的 red）。只会删空白的压缩器会把这些冗余原封不动地留下——只有会重构的优化器才找得到这些收益。

常见问题#

压缩会改变页面显示效果吗？#

不会，只要输入是合法 CSS。CSSO 只做“不改变层叠结果”的变换：合并声明相同的规则、折叠四个值相同的长属性、删掉被更具体或更靠后的规则覆盖的声明。一旦某条变换有歧义，就直接跳过。Format 只动排版，从不改语义。

压缩会保留我的注释吗？#

不会。压缩时所有注释都会被删除，包括 /* !important */ 这类横幅。如果你需要保留 licence 头或构建标记，请把带注释的源文件留作“真源”，构建流水线里压缩后再补回横幅。

为什么有时压缩结果比我输入还大？#

几乎都是因为输入本身已经被压缩过。CSSO 仍然要解析再重新输出，对已经紧凑、已经优化过的输入，已经没东西可省——输出基本同尺寸。喂手写或展开的 CSS 进去，省下来的才是真金白银。

我的 CSS 会被发到服务器吗？#

不会。两个引擎都在你的浏览器里跑。库是从本页自己的打包文件里按需加载的，没有任何网络请求会带着你的样式表出去。