CSS 格式化工具

转换器

美化或压缩 CSS 代码，自动缩进、规范化选择器与属性排序，支持嵌套规则展开，适合清理生成的样式与生产环境压缩，适合配置转换、数据清洗与格式对齐，支持批量处理，浏览器本地运行，免费且无广告。

CSS输入

CSS输出

关于 CSS 格式化工具

CSS 格式化工具帮助你美化或压缩 CSS 代码，基于 CSS 词法分析器逐 token 解析，正确处理选择器、声明块、属性值、注释和嵌套规则。完整支持 @media 响应式查询、@keyframes 关键帧动画、@supports 特性检测、@font-face 字体定义、@import 导入规则等 at-rule，以及 CSS Variables 自定义属性、:where() 与 :is() 伪类函数和 calc() 计算函数。提供 2 空格、4 空格和 Tab 缩进选项，美化与压缩模式一键切换。例如把一行压缩 CSS 展开为每条规则独立成行的格式，选择器、属性与值一目了然。统一缩进后再进入代码评审，能减少因格式差异造成的无关改动；压缩模式适合放进生产构建产物，需要改回可读格式时也只需一键切换。格式化对 :root 变量、层叠顺序和重复声明也能清晰呈现，协助定位覆盖优先级等问题。

使用方法

打开 CSS 格式化工具工具页面
根据需求输入或粘贴数据到输入区域
查看实时处理结果，使用复制按钮获取输出

使用场景

规则/层堆叠梳理 — 把压缩 CSS 按选择器规则的层次展开，理清 @media、@keyframes 与普通规则的堆叠关系。
项目整理 — 统一项目中 CSS 代码的缩进和格式风格，提升代码一致性。
样式审查 — 在审查前格式化 CSS，使选择器和属性结构更清晰。
压缩产物 — 将 CSS 压缩为单行紧凑格式，移除空白，用于生产构建。
排查覆盖问题 — 展开压缩样式后，对照选择器权重与重复声明，定位样式不生效的根因。

常见问题

格式化会改变 CSS 样式吗？

不会。格式化只调整缩进、换行和空格，不改变选择器、属性或值的语义，渲染效果保持不变。

支持 @media 和 @keyframes 吗？

支持。正确处理媒体查询、关键帧动画、@supports 等 at-rules 的嵌套和缩进。

支持压缩模式吗？

支持。切换到压缩模式可以移除多余空格和换行，生成最小化的 CSS 代码。

压缩会保留注释吗？

压缩模式默认移除普通注释；如需保留某些说明（如许可证版权头），可在压缩前手动处理或使用保留注释选项。

支持 calc() 和 CSS 变量吗？

支持。calc() 计算函数、var() 自定义属性引用以及 :where()/:is() 伪类都会保持结构正确排版。

压缩代码能还原成可读吗？

可以。用美化模式一键还原缩进，选择器与声明逐条展开，适合在排查问题时读回压缩产物。

参考来源

评论与讨论

还没有评论，来抢沙发吧！

相关工具