CSS 压缩工具
使用 csso 压缩 CSS——一个把你的样式表解析成真正语法树、而不是简单剥离字符的压缩工具，因此能安全地合并重复规则、缩短数值。完全在你的浏览器中运行。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何CSS 压缩工具
- 1
粘贴你的 CSS
拖入一份样式表、一段代码片段，或单独一条规则。
- 2
开启重构以获得最小输出
它会合并重复和重叠的规则。如果结果让你感到意外，就把它关掉。
- 3
复制结果
复制压缩后的 CSS，以及节省的体积。
CSS 压缩到底去除和改变了什么
去除空白和注释是压缩里显而易见、也最简单的一部分——每一个压缩工具都会做，单靠这一步基本上和一次简单的查找替换没什么区别。真正把一个真正理解 CSS 结构的压缩工具，和单纯剥离空白区分开来的，是所有需要真正理解样式表的部分：简写数值压缩（比如把 `#ffffff` 这样的颜色值变成 `#fff`，去掉多余的零单位）以及重复或重叠规则的合并（两条最终应用相同声明的规则会被合并成一条）。这两者都需要先把 CSS 解析成一个真正的结构——知道哪个选择器对应哪些声明，哪些数值是等价的——这正是为什么 csso 会构建一棵真正的语法树，而不是对文本做模式匹配，也正是一个真正的解析器胜过一遍正则表达式扫描的原因。
为什么单独对一份文件做一次性压缩仍然有必要
现代构建工具会在生产构建过程中自动压缩它们输出的 CSS，所以对于在一个打包项目里工作的人来说，压缩早已在每次构建时不知不觉地发生了。像这样一个独立工具，覆盖的是落在那套流程之外的情况：一个完全没有构建步骤的 CMS 或平台，一段需要塞进某个体积受限场景的一次性代码片段，或者只是想在决定是否值得配置一整套工具链之前，先看看某份样式表到底能缩小多少。对于只需要处理一次的单个文件，把它粘贴到这里、再把结果复制出去，是获得和打包工具同等输出结果的更快路径。
哪些内容会保持原样不动
一个真正理解 CSS 结构的压缩工具，在决定合并或重写什么内容时是刻意保守的：自定义属性（CSS 变量）、媒体查询、关键帧动画和带浏览器前缀的声明都会被原样保留，因为错误地折叠它们，可能会悄悄改变页面在某些浏览器或屏幕尺寸下的渲染效果，而不只是改变源代码看起来的样子。那些可以安全自动完成的优化——空白、注释、简写数值、真正重复的规则——是完全不会影响页面渲染效果的部分，这正是使用真正的解析器、而不是更粗暴、风险更高的查找替换方法背后的整个设计原则。
常见问题
我的样式表会被发送到服务器吗？
不会。csso 会被下载到你的浏览器并在那里运行——压缩完全在你的设备上完成。你的 CSS 在任何时刻都不会经过网络传输。
压缩会破坏我的样式吗？
在正常使用下通常不会——csso 把你的 CSS 解析成一棵真正的语法树，而不是单纯剥离字符，这正是它能安全地合并重复选择器、缩短数值，而不改变层叠中哪条声明生效的原因。它偶尔可能让你感到意外的地方在于它的结构性重构：在整个样式表范围内合并规则，是一种比单纯去除空白更激进的优化，在对特异性敏感的极少数边缘情况下，可能产出和预期不同的结果。这正是"合并并重构规则"这个选项存在的原因——关掉它，你得到的就只是去除了注释和空白，没有任何结构性改动。
压缩后的 CSS 依然是有效、可用的 CSS 吗？
是的。输出是普通的 CSS——只是对人来说难以阅读，这在生产环境里正是重点所在。浏览器解析它的方式和解析格式化后的原文完全一样；你可以直接把它放进一个 `<link>` 标签或构建产物里。
什么时候真的应该用这个工具？
用于生产环境的样式表、嵌入某个体积受限场景的 CSS（一段内联的 `<style>` 代码块、一份邮件模板、一个有字符数限制的平台），或者需要快速缩小、又不想搭建一整套构建流程的一次性文件。不应该压缩你的源代码或开发用样式表——保持它们可读，只压缩最终的构建产物，就像一个打包工具会做的那样。
为什么输出的样式看起来完全无法阅读？
这正是它的意义所在。空白和注释的存在，是为了方便阅读源代码的人，而不是为了渲染页面的浏览器。去掉它们，并安全地合并能够合并的部分，能在不改变页面呈现效果的前提下，减少通过网络发送的字节数。