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

css units-of-measurement
Uri picture Uri · Oct 28, 2011 · Viewed 9.2k times · Source

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.

Answer

Madara's Ghost picture Madara's Ghost · Oct 28, 2011

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.

Related questions

Why em instead of px?

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that …

Read More
Should I use px or rem value units in my CSS?

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts …

Read More
How to set the maximum width of a column in CSS Grid Layout?

What I want to achieve: Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width. How I thought it would work: It looks …

Read More