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

Question

这更像是一个"哲学"论点,但我想知道这里的推荐做法.我没有将它设置为Wiki,以防有"官方"答案.

显然,0px和0em之间没有区别,所以可以简单地指定0并且单位是冗余的(参见0和0em之间的CSS差异).一些回答这个问题的人认为应该总是省略单位.

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

Answer 1

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

从程序员的角度来看,只有0 == null == none == false在哪里0px == 0px.

这意味着如果你指定一个边框宽度0然后没有边框,但如果你指定一个0px边框,那么将创建一个0 px的边框(这背后的想法,实际上0px给出了完全相同的结果0).

更多要点

• 无单位0使其更容易阅读,因为它很容易与正常的单位价值区分开来.
• 删除单位是有意义的,因为它们没有任何意义(0可能意味着大小,颜色等).

结论:将单位省略为0.它们不是必需的并且令人困惑.

Answer 2

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

规格：

注意：因为 <number-token>s 总是被解释为 <number>s 或 <integer>s，"unitless 0" <length>s 在数学函数中不受支持。即 width: calc(0 + 5px); 无效，因为它试图将 <number> 添加到 <length>，即使两者 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()函数中使用该变量时，不会让您和其他人感到困惑。

Answer 3

Css规范说0<unit>可以写0.而且我已多次读过,建议省略单位,我不记得在哪里.

所以省略它们.

见http://www.w3.org/TR/CSS2/syndata.html#length-units