在 CSS 中指定 0 值时，我应该明确标记单位还是省略？答案

【问题标题】：When specifying a 0 value in CSS, should I explicitly mark the units or omit?在 CSS 中指定 0 值时，我应该明确标记单位还是省略？
【发布时间】：2011-12-16 21:45:22
【问题描述】：

这更像是一个“哲学”论点，但我想知道这里推荐的做法是什么。我还没有将其设置为 Wiki，以防万一有“官方”答案。

显然，0px 和 0em 之类的没有区别，因此可以简单地指定 0 并且单位是多余的（请参阅CSS difference between 0 and 0em）。一些回答这个问题的人认为应该始终省略单位。

但是，在我看来，省略该单位更容易出错，因为以后的更改可能会意外地省略该单位。它与文档中其他地方的非零元素也不太一致。

【问题讨论】：

我一般会省略单位以节省一些字节。
在我看来，省略更好。不仅仅是因为指导方针。如果你有很多单位可以用来代替相对和绝对，你怎么知道你是否达到了 0px。这是我认为最令人困惑的事情。无单位零适合所有类型的单位，这是最好的事情。 0 是 0。

标签： css units-of-measurement

【解决方案1】：

作为对这个问题的说明：作为长度的无单位 0 在 calc() 和其他数学函数中不起作用。你必须写0px。如果从某个 css 变量中获取省略了 0 的单位，事情就会变得更加错误。

Specification:

注意：因为 s 总是被解释为 s 或 s，所以数学函数不支持 "unitless 0" s。即width: calc(0 + 5px);无效，因为它试图将添加到，即使 width: 0;和宽度：5px；是有效的。

.a, .b { border: 10px solid; height: 30px; }
.a { width: calc(300px + 0px); border-color: #f00; }
.b { width: calc(300px + 0); border-color: #330; }

<div class="a">width: calc(300px + 0px);</div>
<div class="b">width: calc(300px + 0);</div>

我建议在编写 CSS 变量时始终使用0px。因此，当您和其他人尝试在某些 calc() 函数中使用该变量时，不会让您和其他人感到困惑。

【讨论】：

我希望这更广为人知。当我们在变量中使用 0 时，我们在长时间与计算失败后才发现这一点。这是很好的知识分享！

【解决方案2】：

我逐渐开始相信有单位的零。

我遵循使用无单位零的样式指南。我也觉得他们更好看。我同意这里所有支持无单位的论点。但是在我的职业生涯中，有两次错误是由无单位零引起的。（一个与calc 有关，一个与从 0 到某物的转换有关 - 但我不记得细节了。）

在等式的一侧加上“导致错误”，任何支持无单位的论点都可以竞争，无论在美学上如何令人愉悦或合乎逻辑吗？

顺便说一句，我最初将无单位零样式归因于 Airbnb 的指南，但在重读之后，它实际上并没有明确地说，而是接近了：https://stackoverflow.com/a/55391061/2836695

【讨论】：

【解决方案3】：

CSS specification 说（引用）：

在零长度之后，单位标识符是可选的。

而且我看过很多次建议省略单位，我不记得在哪里。

所以省略它们。

【讨论】：

我看到'can'，但我没有看到'should'部分：“长度值的格式（在本规范中用表示）是一个（带或不带小数点）紧跟单位标识符（例如，px、em 等）。在零长度之后，单位标识符是可选的。"
发布的链接是我找到的关于你的问题的第一个参考，但我读过很多次建议省略单位，我不记得在哪里。

【解决方案4】：

在当前的浏览器开发工具中，您可以使用向上/向下光标键轻松调整值，但如果您指定 0 没有单位，那么它将不起作用，因为浏览器将不知道您是什么单位更喜欢，设置1，2...没有单位是没有意义的。

这就是为什么我现在也总是将单位指定为零值。任何 CSS 缩小器都会在缩小时将其更改为 0，因此您甚至不需要关心它。

【讨论】：

这是错误的，我可以说对于 Chrome 和 Firefox，如果没有单位，一旦你开始使用箭头键移动，两者都会添加“px”
是的，好像从那以后就修好了。

【解决方案5】：

我也喜欢用零来表示单位，因为 ...

正如 Istvan 所提到的，IDE 喜欢将值放在那里，以便它们可以适当地递增。
如果我输入另一个值，我以后不必再输入单位。而且我不必尝试记住如果它是零则删除该单位，或者如果不是则将其放回原处。
一位海报说裸零可读性更强。我发现它不是。当有一个单元时，你就有了上下文，这使它更具可读性。例如，如果我遇到一个百分号，我知道我使用它的方式与“px”单位不同，所以我立即知道它可能是什么。
另一个人，“红”，有this 说，这看起来很不错。这是一个sn-p...

但是，如果您打算更改级联中的先前值，您会注意到它。 '0em' 表示，'将先前的值更改为'0em'，但零可能只是说，'忽略此规则'并保留先前的规则有效。这可能根本不是您对赤裸裸的“0”的预期。 original article link

【讨论】：

我认为第 4 点中引用的文字不正确。根据我的经验，如果您将某些内容设置为“裸 0”，它实际上会被设置为零。它不会使用之前的规则。也许字体不是这种情况，但我认为永远不需要将字体大小设置为零。
此外，将任何文本字体大小设置为零甚至可能会受到搜索引擎的“惩罚”，因为这是一种仅为搜索引擎而非实际用户添加关键字内容的方法。

【解决方案6】：

我认为你也应该省略单位。

从程序员的角度来看，0 == null == none == false，其中仅0px == 0px。

这意味着如果您指定边框宽度为0，那么将不会有边框，但如果您指定0px 边框，那么将创建一个0 px 的边框（这就是它背后的想法，在现实0px 给出与0 完全相同的结果。

补充说明

无单位 0 使其更易于阅读，因为它很容易与正常的单位值区分开来。
删除单位是有意义的，因为它们在那里没有意义（0 可能意味着大小、颜色等）。

结论：省略 0 中的单位。它们没有必要且令人困惑。

【讨论】：

虽然我希望以一种或另一种方式获得官方指南，但 CSS 规范似乎将此保留为可选。尽管我不确定我是否完全同意，但这个答案似乎是最详尽且最有意义的。
+1 我经常想知道，您的回答非常有道理； “如果你指定一个 0px 的边框，那么将创建一个 0 px 的边框”为我敲定了。
还可以注意到，当您键入 0px 并建议 0 获取 CSS 值时，某些 IDE 会警告您。当然，PHPStorm 就是其中之一。仅此行为就支持此答案。 +1

【解决方案7】：

我总是省略，因为它看起来更容易阅读，零会弹出并且很容易与它周围的带单位值区分开来。

【讨论】：

【解决方案8】：

我说省略单元，这将有助于压缩 CSS 并提高性能。不多，但每一点都有帮助。

【讨论】：