When specifying a 0 value in CSS, should I explicitly mark the units or omit?

Question

This is more of a \'philosophy\' argument, but I\'d like to know what the recommended practice here. I\'m not setting it up as a Wiki yet in case there is an \'official\' an

Answer 1

I argue you should also omit the units.

From a programmer's perspective, 0 == null == none == false, where 0px == 0px only.

Which means that if you specify a border width of 0 then no border will be there, but if you specify a 0px border, then a border of 0 px will be created (that's the idea behind it, in reality 0px gives the exact same result like 0).

Further Points

• unit-less 0 makes it easier to read as it is easily distinguishable from normal unit'ed values.
• It makes sense to remove the units as they have no point in being there (0 could mean size, color, etc.).

Conclusion: Omit the units in 0. They're not needed and confusing.

Answer 2

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.