CSS 格式化

如何使用CSS 格式化

关于CSS 格式化的常见问题

CSS 格式化会上传我的样式表吗？

不会。CSS 格式化全程在你的浏览器本地完成，样式表不上传到任何服务器，关闭页面即清除。公司主题样式、还没发布的改版样式、后台模板里的存量 CSS 常带内网地址和业务信息，所以 CSS 格式化不上传这一点很要紧：本工具只把缩进宽度这类排版偏好写进本机 localStorage，CSS 正文与结果一律不落盘（页面只加载访问统计脚本，它不读取也不上报你粘贴的内容）。想验证就断网再排一次版，照样出结果。

手机上能用 CSS 格式化在线工具吗？

可以。本 CSS 格式化在线工具是纯网页实现，手机、平板、电脑浏览器打开即用，无需安装软件，也无需注册登录。手机上做 CSS 排版和电脑上是同一套结果，输入区与结果区在窄屏会上下堆叠而不是并排，结果区支持横向滚动，长行不会被折断破坏缩进；结构体检面板在小屏默认折叠成一行，点开再逐条看。

CSS 格式化工具免费吗？要注册登录吗？

免费，不需要注册登录，也不加水印。CSS 格式化跑的是一段在你浏览器里执行的 JavaScript，算力用的是你自己的设备，我们这边没有要养的转换服务器，所以不设付费墙，也不用留邮箱换额度。格式化过程本身不发任何网络请求，断网再排一次版照样出结果。唯一的边界是单次输入约 2MB，这是浏览器内存与响应速度的取舍，不是收费门槛；超过 200KB 会自动关掉边输入边排版、改成点按钮触发，同样与付费无关。

CSS 格式化会改动 url() 里的地址吗？

不会。url() 括号里的内容整段原样透传：data: URI 里的 ;base64, 不会被当成声明分隔符切断，带双斜杠的地址不会被当成 SCSS 行注释，未加引号的路径也不会被替你补上引号，反斜杠转义的右括号同样不会提前结束。识别方式是从左括号扫到配对的右括号，中间的分号、大括号、冒号一概不解释，所以 background: url(https://cdn.a.com/b.png?x=1;y=2) 排完版还是原来那一串。

CSS 格式化会把 calc() 里的空格弄没吗？

不会，这正是本工具最在意的一条。calc(100% - 2px) 里加号减号两侧的空格是 CSS 语法的一部分，折成 calc(100%-2px) 这条声明当场失效，页面上就是宽度突然不对。本工具冒号右边的值逐字符原样，只规范四处空白：属性名与冒号之间、冒号与值之间、声明与声明之间、块与块之间。所以 --gap: 1px 2px 里的多个空格、font: 12px/1.5 "PingFang SC",sans-serif 里逗号后面不补空格，都是刻意的——宁可值里挤一点，也绝不动值里的一个空格。

CSS 格式化支持 SCSS、LESS 和嵌套写法吗？

支持排版。原生 CSS 嵌套、SCSS 的嵌套与 &、$变量、@include 与 @each、#{} 插值、LESS 的 @变量声明与 .mixin() 调用，都会按大括号层级正确缩进且不改内容；#{} 插值整段原样并且不计入嵌套深度，否则整篇缩进都会错位。// 行注释默认按注释整段保留、独立成行。但本页只排版不编译：不把 SCSS 变量求值、不展开 mixin，也不会把 SCSS 转成 CSS。

CSS 格式化能检查大括号有没有闭合吗？

会做 CSS 大括号闭合检查，但只提示不自动改。共 6 类：大括号未闭合、多余的右大括号、注释未闭合、字符串未闭合、声明缺冒号、同一块内同属性同值重复。每条给出第几行第几列和中文说明，点一下能跳到输入框对应行——想知道 CSS 大括号没闭合怎么找，把样式表粘进来看体检面板即可。判定时字符串、url()、注释与 #{} 里的大括号不参与计数，所以 content: "a{b}" 不会被误判。这不是 CSS 语法有效性校验，也不查属性名拼写与浏览器兼容性。

CSS 格式化支持多大的样式表？有上限吗？

单次上限约 2MB，按 UTF-8 字节数计算，一般项目的样式表、主题文件与构建产物都够用。几十 KB 的样式表毫秒级完成，接近上限的极端输入实测也在半秒内。超过 200KB 会自动关掉「边输入边排版」，改成参数调好后点按钮再处理，免得每次击键都占住主线程；超过 2MB 会直接提示并拦截，请先拆分。结果区只预览前 8000 个字符，下载的文件是完整内容。

CSS 格式化会把颜色和属性名改成小写吗？

默认都不改。#0A7 这样的颜色码、-WEBKIT- 前缀的大小写、*zoom 与 _height 这类 IE hack、width: 100px\9 里的反斜杠九，全部原样保留。需要统一时可以在参数区打开「hex 颜色转小写」，它只动值里形如 #RGB、#RGBA、#RRGGBB、#RRGGBBAA 且词边界完整的颜色码，选择器里的 id、字符串里的文本、url() 里的地址一个字符都不碰。整份工具只有这个开关和「补末尾分号」会动到字符，其余都是纯空白排版。

CSS 格式化后样式失效了怎么排查？

先分清是排版改坏了，还是原文本来就有问题。把结果再格式化一次，输出与上一次逐字节相同，说明排版是幂等的；再拿原文和结果做一次 diff，本工具只重写四处空白——属性名与冒号之间、冒号与值之间、声明与声明之间、块与块之间，diff 里冒出别的差异就不是 CSS 格式化造成的。会改到字符的只有两个开关：hex 颜色转小写、补末尾分号，关掉再排一次即可对照。如果是原文里少了一个大括号，浏览器解析时会跳过后面的声明或整个规则块，这种失效在格式化之前就已经存在，按结构体检给出的行列去补即可。

CSS 格式化能把样式表压成一行吗？

不能，本页只做美化方向：按大括号层级缩进、一条声明一行、清掉行尾空格、把连续空行折叠成一个、文末补一个换行，不提供把样式表压成一行的功能，也不做属性排序、简写合并、删重复声明或删空规则——那些都属于改内容，一做就和「值不改」的承诺冲突。要减小体积请交给构建流程里的打包工具处理，那里能结合实际用到的选择器一起优化，比在网页上压一遍更靠谱。

CSS 格式化到底会改动哪些东西

CSS 在线格式化（也就是常说的 CSS 代码美化）只重写节点与节点之间的空白，做的是 CSS 缩进对齐这一件事。下面这张保真对照表就是这个 CSS 格式化工具的完整承诺：左列的东西全部 原样保留，唯一会被动的是空白本身。

还有一条安全边界要说在前面：本页不提供「预览渲染效果」，结果一律以纯文本 展示，实现里没有任何把输入挂进 style 标签或样式表对象的路径。原因很直接——CSS 一旦真的生效，@import、background 的 url() 与 @font-face 的字体地址会立刻向第三方发请求， 等于把你的私有样式表内容和访问行为带出去。同理，本页只排版不做安全清洗，值里的可疑 地址会原样透传，因为消毒也是改内容。

为什么 CSS 格式化不能动值里的空格

这是本工具和市面上多数在线 CSS 格式化最大的差别，也是最容易被忽略的一个坑：CSS 的值里，有些空白是语法的一部分。把它们当成「可以规范化的排版空白」 一折叠，声明当场失效。先看被折坏的经典反例：

/* 原文：宽度 = 容器宽度减 2px */
.card { --card-pad: calc(100% - 2px); }

/* 被某些格式化器折掉空格后：整条声明失效，宽度回退成默认值 */
.card { --card-pad: calc(100%-2px); }

/* 更隐蔽的一种：手画的区域图被折成一行，可读性没了 */
.layout { grid-template-areas: "h h" "s m"; }

本工具允许改动的空白只有四处，写在这里方便你核对结果：

还有一处判据值得单独讲，因为 AI 与教程里经常讲错：同一个冒号，在三种上下文里的处理方式完全不同，而判据不是「它长什么样」， 而是「这一段是怎么结束的」。

一句话总结本工具的取舍：宁可值里挤一点，也绝不动值里的一个空格。 值里逗号后面不补空格也是同一个原因——补空格在 font 简写上无害，但只要开了「值内可以动」 的口子，calc()、grid-template-areas 和自定义属性这三条就守不住了。

CSS 格式化前后对比示例：一份压成一行的样式表

页面里「填入示例」用的就是下面这段样式表，它一次踩满了 @charset、注释、自定义属性、 calc() 空格、多选择器逗号、url() 里的分号、字符串里的大括号、@media 的 prelude 冒号 与降级链九个容易被改坏的点：

@charset "utf-8";
/* 主题变量 */
:root{--brand:#0a7;--card-pad:calc(100% - 2px)}
.card,.card--wide{margin:0 auto;background:url(https://cdn.a.com/b.png?x=1;y=2) no-repeat;font:12px/1.5 "PingFang SC",sans-serif}
.card:hover::after{content:"a{b}";color:var(--brand)}
@media (min-width:768px) and (max-width:1024px){.card{display:-webkit-box;display:flex}}
@keyframes fade{0%,100%{opacity:0}50%{opacity:1}}

按默认的 2 空格美化后，实测输出是 31 行 / 493 字符 / 6 条规则 / 3 个 at 规则 / 8 条选择器 / 11 条声明 / 最深 2 层 / 原样保留 7 段，结构体检 0 条：

@charset "utf-8";
/* 主题变量 */
:root {
  --brand: #0a7;
  --card-pad: calc(100% - 2px);
}
.card,
.card--wide {
  margin: 0 auto;
  background: url(https://cdn.a.com/b.png?x=1;y=2) no-repeat;
  font: 12px/1.5 "PingFang SC",sans-serif;
}
.card:hover::after {
  content: "a{b}";
  color: var(--brand);
}
@media (min-width:768px) and (max-width:1024px) {
  .card {
    display: -webkit-box;
    display: flex;
  }
}
@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

九处细节值得对照着看：@charset 独立成行、大小写没被动；注释原样；两个自定义属性正常成为 声明，calc(100% - 2px) 的空格一个没少；.card 与 .card--wide 按顶层逗号断成两行；url() 里的双斜杠和分号没被当分隔符切开；content 里的 {b} 没有改变嵌套层级；@media 的 min-width:768px 既没被当成声明，也没被补空格；-webkit-box 与 flex 的降级链原样留着， 体检也不报重复；@keyframes 里的 0% 与 100% 按普通选择器断行。这份结果还是幂等的——把它再格式化一次，输出与现在逐字节相同。

顺带记一组同一份样本的实测数字，挑缩进时可以对照：同样是这 31 行，2 空格输出 493 字符、4 空格 537 字符、Tab 471 字符——换缩进只改体积、不改行数；换行符从 LF 换成 CRLF 会多 31 个字符，正好等于行数。三种缩进没有优劣之分，团队里选定一种写进 .editorconfig，下次 diff 里才只剩真正的改动。

CSS 格式化时 at 规则与嵌套怎么缩进

CSS 里的 at 规则有两种形态：带大括号块的（@media、@keyframes）和以分号结束的 （@charset、@import）。分不清这两种的格式化器，最常见的翻车方式是拿名字去猜—— 可 CSS 每年都在加新 at 规则，@container、@layer、@scope 都是近几年才有的， @layer 本身还同时有两种写法。本工具只看这一段实际是怎么结束的， 名字表只用来写提示文案，不参与切分。

统计条里的「最深 N 层」数的就是大括号的嵌套层级。要注意自定义属性那一行： --x: {color:red}; 的大括号是值的一部分，不是块， 把它当块会让后面整篇样式表的缩进错位一层——这是本类工具最高发的一个切错位点， 另一个是 url(data:…;base64,…) 里的那个分号。

CSS 格式化能查出哪 6 类结构问题

CSS 没有「良构」这个契约——浏览器遇到看不懂的声明是跳过继续解析，不是整篇报错。 所以本工具永不因为语法有问题而拒绝出结果，发现的问题一律作为非阻断 提示列在结果旁（黄色，不是红色报错）。规则只有下面 6 条，刻意不扩表：CSS 的属性与新特性天天在变，多加一条就多一片误报。

每条都给「第 N 行第 M 列 + 中文说明」，点一下就跳到输入框对应行。没有问题时显示 「未发现结构问题」，而不是打一个绿色对勾——本页不做 CSS 有效性校验，不能替浏览器承诺 这份样式表一定合法。问题特别多时只列前 200 条，剩下的会在提示里说明还有多少。

CSS 格式化能做什么、不能做什么

相关教程

遇到格式选择、乱码或校验问题，可以先看这些说明再动手处理。

• 问题解答JSON 格式错误怎么排查？常见语法错误与修复方法JSON 解析失败的排查方法：报错行列为什么常常指偏、尾逗号与单引号等五类高频语法错误的修法、JSON 与 JavaScript 语法的差别，以及大整数精度丢失、重复键这类不报错但结果已经错了的问题。