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

Obviously, there is no difference between 0px and 0em or whatever, so one could simply specify 0 and the units are redundant (see CSS difference between 0 and 0em). Some of the folks who answered that question argued that one should always omit the units.

However, it seems to me that omitting the unit is more error-prone, since a later change may accidentally omit the unit. It is also less consistent with non-zero elements elsewhere in the document.

Complication

I generally omit units to save a few bytes here and there. – Jacindajacinta

In my oppinion omitting is better. Not only because of guidelines. How do you know if you are getting to 0px if you have many units you could use instead relative and absoulute. That is the most confusing thing in my oppinion. Unitless zero fits all types of units and that is the best thing about it. 0 is 0. – Rumania

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.

Proverb

While I was hoping for an official guideline one way or the other, the CSS spec seems to leave this optional. This answer seems the most elaborate and makes sense, though I'm not sure I fully agree. – Complication

+1 I've often wondered, and your answer makes perfect sense; "if you specify a 0px border, then a border of 0 px will be created" clinched it for me. – Killian

It could also be noted that a some IDE's will warn you when you type 0px and suggest 0 for CSS values. PHPStorm is one, for sure. That behavior alone supports this answer. +1 – Bayonet

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.

Scorpius

I wish this were more widely known. We only found this after fighting with a calculation for a long time that failed when we used 0 in our variables. This is great knowledge to share! – Burgle

Answer 3

The CSS specification says (quote):

After a zero length, the unit identifier is optional.

And I've read many times that it is suggested to omit the unit, I can't remember where.

So omit them.

Fell

I see the 'can', but I didn't see the 'should' part: "The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional." – Complication

The link posted is the first ref i've found about your question, but i've read many times that it is suggested to omit the unit, i can't remember where. – Trahern

Answer 4

I also like to put units by my zeros because ...

1. IDEs like to have the values there so they can increment them properly, as Istvan mentioned.
2. I don't have to type the unit later if I put another value in. And I don't have to try and remember to remove the unit if it's zero or put it back if it's not.
3. One poster said the naked zero was more readable. I find that it's not. When there is a unit, you have context, and that makes it more readable. For example, if I come across a percent sign, I know I use that in different ways than the "px" unit, so I instantly know some of the things it could be.
4. Another guy, "red", had this to say, which looks like good info. Here's a snippet...

   However, you will notice it if you intended to change a prior value in the cascade. a '0em' says, 'change the prior value to '0em', but a zero may simply say, 'disregard this rule' and leave the prior rule in effect. This may not be at all what you intended with your naked '0'. original article link

Strychnic

I think the quoted text in point 4 is incorrect. In my experience if you set something to a "naked 0" it will really be set to zero. It will not use the previous rule. Maybe this is not the case for fonts, but I think setting font size to zero is never needed. – Brainstorming

Moreover, setting any text font size to zero might even be "punished" by search engines, since it's a way to add keyword ridden content only for search engines, not for actual users. – Brainstorming

Answer 5

I say omit the unit, this will help when you compress the CSS and increase performance. It isn't much, but every little bit helps.

Delvalle

Answer 6

In current browsers developer tools you can easily tweak the values live with the up/down cursor keys, but if you specify 0 without a unit, then it will not work, as the browser will not know what unit do you prefer, and setting 1, 2... without a unit has no meaning.

That is why I am always specifying the unit nowadays on zero values too. Any CSS minifier will change that to 0 on minification so you don't even need to care about it.

Bookmobile

This is false, I can say that for Chrome and Firefox that if there's no unit both will add "px" once you start to move with the arrow keys – Chianti

Yeah, seems to be fixed since then. – Fungosity

Answer 7

I always omit as it seems easier to read, the zero pops out and is easily distinguishable from the with-unit values around it.

Disinfectant

Answer 8

I'm gradually starting to believe in zeros with units.

I follow a style guide that says to use unitless zeros. I also think they look better. I agree with all the pro-unitless arguments on here. But twice in my career a bug has been caused by unitless zeros. (one having to do with calc and one having to do with a transition from 0 to something - but I can't remember the details.)

With "causes bugs" on one side of the equation can any pro-unitless argument compete no matter how aesthetically pleasing or logical?

---

BTW, I originally attributed the unitless zero style to Airbnb's guide, but after rereading it, it doesn't actually say that explicity, but comes close: https://mcmap.net/q/350112/-when-specifying-a-0-value-in-css-should-i-explicitly-mark-the-units-or-omit

Frederickson