CSS 美化与压缩：属性排序、规则缩进、展开或压缩。
- 本地处理
- 分类 格式转换
- 适合 把粘贴内容或本地文件转成更适合交付的格式。
格式化结果显示在这里。这个工具能做什么
在线 CSS 格式化、美化、压缩工具。粘贴原始 CSS 得到干净缩进输出（2 空格、 4 空格或 Tab 三档）,一键压缩去除所有空白与注释,直接交付生产环境。可选 字典序属性排序,让每条规则形状一致,diff 体积小、code review 不头疼。 支持嵌套 @media / @keyframes / @supports / 注释 / 字符串中的大括号, tokenizer 基于大括号配对而不是脆弱的正则。100% 浏览器本地运行：设计 token、 主题覆盖、未压缩的第三方 CSS 都不出标签页。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 20 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 格式转换 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 美化与压缩 适合怎么用
适合把内容从一种实际格式转成另一种可用格式。
适合转换的任务
- 把粘贴内容或本地文件转成更适合交付的格式。
- 放进大流程前,先预览转换结果是否可靠。
- 修正常见格式不匹配,不用打开完整编辑器。
转换检查项
- 源格式比较乱时,先拿一小段试转。
- 转换后检查编码、分隔符和换行符。
- 结果确认前保留原始内容。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
读别人在群里甩的 400 行压缩主题文件
同事丢来一段单行 18KB 的编译 CSS,问你「为什么这里按钮是蓝的」。 你粘进去,选 2 空格缩进点 Format,几秒就能逐条扫选择器,定位到 那一句 `.btn { background: #2563eb }`,不用再对着一墙分号眯眼找。
把关键 CSS 片段压小后内联进 head
你手写了一段 1.2KB 的首屏样式准备内联到 `<head>`。点 Minify 去掉 注释和空白后大约剩 780 字节,塞进 HTML 不会拖慢首屏渲染。值保持 字节一致,所以渲染结果和你测过的完全一样。
把一份吵闹的 CSS diff 改得能看
两个人改了同一份 60 条规则的样式表,PR diff 因为缩进和属性顺序 漂移而完全没法读。把两个版本都开 Sort properties 跑一遍 Format 再贴回去,diff 就从四十行装饰性改动收敛到真正改的那三行。
审一份 NDA 范围内的第三方样式表
客户把还没发布的设计系统作为一个压缩文件交付,你要确认它没有对 你的品牌 token 加 `!important` 覆盖。本地 Format 展开后搜一下输出 就能核实,整个过程不用把他们未发布的 CSS 上传到任何第三方服务器。
常见踩坑
别指望它像构建工具那样优化值,`#ffffff` 和 `0px` 都按原文保留;想要 `#fff`、`0` 请跑 cssnano。
当声明顺序有意义时别开 Sort properties,比如先 `border` 后 `border-color`,字典序会把它们调换;这种简写加覆盖的写法保持排序关闭。
把真正的 SCSS（带 `@include`、`$变量`）丢进来还指望美化输出,SCSS 特有语法只会原样保留不格式化;请改用 Prettier 的 SCSS parser。
隐私说明
格式化、压缩、排序全部在你的浏览器标签页内由大括号配对 tokenizer 完成, 粘贴的 CSS 不会发往服务器、不会被记录、也不会进 URL。点 Format 或 Minify 时打开 DevTools 的网络面板就能确认零请求。未发布的设计 token、内部主题 文件、NDA 范围内的 CSS 都可以放心粘贴。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。