CSS 格式化 / 压缩
美化 CSS 缩进排版，也能一键压缩去掉冗余空白
CSS 格式化与压缩：calc 里的空格为什么不能删
压缩具体删了什么
CSS 压缩（minify）是安全地去掉语法上非必需的字符。常见优化包括：
| 优化 | 示例 |
|---|---|
| 删除注释 | /* ... */ 全部移除（包括版权声明——商业项目要注意许可证是否要求保留） |
| 折叠空白与换行 | 多条规则压成一行 |
| 删除最后一个分号 | color:red;} → color:red} |
| 零值去单位 | margin: 0px → margin: 0 |
| 缩短十六进制颜色 | #ffffff → #fff，#aabbcc → #abc |
| 省略小数前导零 | 0.5em → .5em |
体积通常能减少 20%~30%。但有一点要清楚：如果你在 HTTP 层开了 gzip 或 brotli 压缩，手工压缩 CSS 的额外收益很小——通用压缩算法本身就会消除重复的空白与结构。压缩真正有价值的地方是：不能启用服务端压缩的静态托管、内联在 HTML 里的样式块、以及有严格体积限制的场景。
不能删的空格：calc()
这是压缩 CSS 时最危险的一处。CSS 的 calc() 里，加号和减号两侧必须有空格：
| 写法 | 结果 |
|---|---|
calc(100% - 10px) | 正确 |
calc(100%-10px) | 失效（会被解析成无效表达式） |
calc(100% -10px) | 失效 |
原因是解析器遇到 100% 后会尝试识别一个数字或单位标记，-10px 被当作负值而不是减法运算，整体表达式非法。
乘号和除号不受影响（calc(100%/3) 合法），因为乘除不需要依靠空白来区分操作数和运算符。所以"统一删除所有空格"的实现会悄悄破坏所有用加减法的 calc，表现为布局突然错位——而且这类 bug 在压缩后只出现在线上，本地开发看不到。工具在压缩时会保留 calc() 内加减号两侧的空格。
其他格式化注意点
- 注释在压缩时会被删掉。用注释做的 hack（如给某些选择器故意留标记）、以及许可证声明都会消失。需要保留的内容应写在单独的许可文件里。
- 选择器之间的空白是有意义的。
.a .b（后代）与.a.b（同时匹配）完全不同，压缩时不能把选择器内的空格一律删除。 - 属性选择器和内容里的引号。
content: "";、[href^="http"]里的引号必须保留，删除会导致语法错误。 !important前后的空白可以压缩，但!与important之间的空白在部分老解析器里不允许省略。! important和!important都合法，压缩时统一成后者最保险。- 自定义属性（CSS 变量）的值是原始 token。
--gap: 8px 16px;里的空白是值的一部分，压缩算法不应随意处理自定义属性的值。 - 媒体查询与嵌套。压缩后一堆规则挤在一行会让排查困难，所以保留一份未压缩的源文件是必要的——压缩产物只应作为部署产物，不该作为编辑对象。
工具怎么用
两个方向：格式化（按规则集缩进排版，便于阅读和评审）、压缩（去掉冗余空白，用于部署）。可逆性不同——压缩是不可逆的（注释和格式信息已经丢失），所以压缩务必在源文件的副本上做。
处理在浏览器本地完成。
常见问题
压缩会删掉注释吗？
会。压缩模式会移除 /* */ 注释并去掉所有冗余空白，体积显著减小，适合上线。
压缩会改变样式效果吗？
不会。只在语法允许处去除空白，等价压缩。