当前位置：文江博客话题详情

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

发布于 2024-12-12 07:35:01 字数 318 浏览 3 评论 0原文

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

显然，0px 和 0em 或其他什么之间没有区别，因此可以简单地指定 0 并且单位是多余的（请参阅 0 和 0em 之间的 CSS 差异）。一些回答该问题的人认为应该始终省略单位。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

林空鹿饮溪 2024-12-19 07:35:01

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

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

这意味着如果您指定 0 的边框宽度，则不会有边框，但如果您指定 0px 边框，则会创建 0 px 的边框（这就是其背后的想法，实际上 0px 给出的结果与 0 完全相同）。

进一步的点

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

结论：省略 0 中的单位。它们不是必需的，而且会造成混淆。

回复收藏 0 原文

弥枳 2024-12-19 07:35:01

作为这个问题的注释：无单位 0 作为长度在 calc() 和其他数学函数中不起作用。您必须写0px。如果省略 0 的单位是从某个 css 变量中获取的，事情会更加麻烦。

规范：

注意：由于始终被解释为或，因此数学函数不支持“无单位 0”。即宽度：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() 函数中使用该变量时，它不会让您和其他人感到困惑。

As a note to this question: Unitless 0 as length won't work in calc() and other math functions. You have to write 0px. And things would be more buggy if the unit omitted 0 is taken from some css variable.

Specification:

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in math functions. That is, width: calc(0 + 5px); is invalid, because it’s trying to add a <number> to a <length>, even though both width: 0; and width: 5px; are valid.

.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>

I would suggest always use 0px when you are writing CSS variables. So it won't make you and others confuse when they are trying to use the variable in some calc() functions.

回复收藏 0 原文

不知所踪 2024-12-19 07:35:01

CSS 规范说（引用）：

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

我已经读过很多次建议省略该单位，我不记得在哪里了。

所以省略它们。

回复收藏 0 原文

临走之时 2024-12-19 07:35:01

我还喜欢将单位放在零前面，因为...

IDE 喜欢在那里保存值，这样它们就可以正确地递增它们，正如 Istvan 提到的那样。
如果我输入另一个值，我不必稍后输入单位。而且我不必尝试并记住如果单位为零则删除该单位，或者如果不是零则将其放回去。
一位发帖者表示，裸露的零更具可读性。我发现它不是。当有一个单元时，你就有了上下文，这使得它更具可读性。例如，如果我遇到百分号，我知道我使用它的方式与“px”单位不同，所以我立即知道它可能是什么。
另一个人，“红色”，有这个要说，看起来喜欢好的信息。这是一个片段...
<块引用>
但是，如果您打算更改级联中的先前值，您会注意到它。 '0em' 表示“将先前的值更改为 '0em”，但零可能只是表示“忽略此规则”并保持先前的规则有效。这可能根本不是你对赤裸裸的“0”的初衷。原始文章链接