格式化

CSS 格式化

CSS 代码格式化、压缩和美化

输入 CSS
格式化结果
格式化结果将显示在这里

什么是 CSS 格式化？

CSS（Cascading Style Sheets）是用于描述网页样式的样式表语言。CSS 格式化工具可以将压缩的 CSS 代码转换为易于阅读的格式，添加适当的缩进和换行，帮助开发者更好地理解和维护样式代码。

功能特点

  • 格式化：美化 CSS 代码结构，提高可读性
  • 压缩：压缩 CSS 代码，移除空白字符，减小文件大小
  • 自定义缩进：支持自定义缩进大小
  • 语法校验：实时检查 CSS 语法错误
  • 压缩率显示：实时显示压缩比例和大小变化
  • 快速复制：一键复制格式化或压缩结果

使用场景

  • 代码审查：格式化 CSS 便于代码审查
  • 样式优化：压缩 CSS 减小文件大小，提升加载速度
  • 文档编写：生成格式化的 CSS 文档
  • 样式调试：格式化后更容易定位样式问题

常见问题

格式化后的 CSS 体积变大，影响加载吗？
不影响线上性能：格式化用于开发和调试，部署前用压缩（minify）版本即可，两者互为无损变换。本工具支持展开/紧凑两种输出——开发用展开、构建产物用压缩。
为什么属性顺序被打乱了？
如果开启了排序选项，工具会按属性分类（布局 → 盒模型 → 排版 → 视觉）重排，这是流行的可维护性约定（类似 stylelint-order）。纯格式化模式下属性顺序保持原样。
CSS 嵌套语法（&）能格式化吗？
可以。格式化只处理缩进、换行和空白，不解析属性含义，原生 CSS 嵌套以及 Less、SCSS 的结构都能正常展开；压缩模式会保留嵌套结构不展开。