CSS 格式化工具
将压缩或混乱的 CSS 转换为整洁、易读、缩进规范的规则。
输入
输出
如何使用 CSS 格式化工具
- 在左侧粘贴你的 CSS。
- 格式化后的版本会显示在右侧。
- 复制整洁的 CSS。
关于 CSS 格式化工具
CSS 格式化工具可以将压缩或格式混乱的样式表转换为整洁、易读的规则。将 CSS 粘贴到左侧,格式化后的版本会显示在右侧,每个选择器、声明和结束大括号都以一致的方式排列并缩进,让规则结构一目了然。
该工具由 js-beautify 驱动——这是许多代码编辑器内置使用的成熟格式化库,因此间距和缩进遵循开发者早已熟悉的惯例,而非临时拼凑的风格。当你接手一份压缩过的生产环境样式表,或是构建工具生成的打包文件,又需要在不与密密麻麻的单行代码较劲的情况下理解或编辑它时,这个工具尤其好用。
所有格式化操作都在浏览器本地完成,你的 CSS 不会被上传。完成后,将整洁的结果复制回你的项目即可。准备上线时,可使用 CSS 压缩工具 重新压缩;若要处理样式周围的标记和脚本,HTML 格式化工具 和 JavaScript 格式化工具 也能完成同样的工作。
常见问题
它使用哪种格式化引擎?
它使用 js-beautify,这是一款同样内置于许多编辑器和 IDE 中的成熟库。它的间距和缩进规则可预测、也很常见,而不是临时自创的实现方式。
格式化会改变样式的应用效果吗?
不会。它只调整空白和缩进,你的选择器、属性和值都保持不变,因此格式化后浏览器中的样式表现完全相同。
它能展开压缩过的样式表吗?
可以。粘贴一份压缩成单行的 CSS 文件,它会被重新缩进为易读的规则,这在你需要检查或编辑生产环境或构建工具输出的代码时非常实用。
我的 CSS 会被上传到任何地方吗?
不会。格式化过程完全在浏览器中进行,你的样式表不会离开页面,因此对专有或未发布的样式同样安全。
之后要怎样重新压缩以用于生产环境?
编辑完成后,将结果放入 CSS 压缩工具中运行,即可去除注释和空白,生成更小的文件用于部署,同时单独保留你的可读版本。