I’m pretty big on writing shorthand CSS. At my previous job, I used to point out instances of 0px or 15px 0px 10px 0px and suggest that they be written as simply 0 or 15px 0 10px. As we used a preprocessor, it minified our code, but there were some things that weren’t taken care of.

There are some linting tools that you can use in your development process to take care of little things like this, but one small thing I didn’t consider was leading zeros in front of decimal places/points.

Usage of decimals in CSS

You can’t really have ‘half a pixel’ – 2.5px wouldn’t be recommended, and browsers round sub-pixels differently. But you may have percentage values or em or rem units using decimal places:

p {
    font-size: 0.9rem;
}

ul {
    padding: 0.75em;
}

blockquote {
    width: 72.5%;
}

Two of the examples in the code above have leading zeros in front of the values. Basic mathematics: this suggests that the value is less than 1. The question is, does it matter if the leading zero is omitted? Will it have any effect on the rendering of the web page?

The leading zero does not matter

As one would probably expect – given CSS’s general behaviour towards shorthand – CSS does not mind if the leading zero in decimal values is omitted. It wasn’t until I personally tested a build with and without leading zeros that I noticed it made no difference. I checked in most modern browsers. Personally, I chose to omit the zeros to make my CSS as clean as possible.

p {
    font-size: .9rem;
}

ul {
    padding: .75em;
}

I am unable to find any documentation specifically stating omitting the leading zero, but the Codestyle.co CSS Guidelines suggest doing so, and some linters such as LeadingZero will remove any zeros that fit this case.

But including it doesn’t hurt either

The Scally CSS framework chooses to always include the leading zero when writing decimal point values, so it seems that there is no ‘standard’. If including the zero for readability purposes, then I would be inclined to agree because it can be easy to either mistake the decimal point for a typing error, or forget that it’s there.

An alternate, mathematical point of view

I came across an interesting article in my research. While titled ‘A Post about Nothing’, the article posted on the American Psychological Association Style Blog states:

APA Style has a very simple guideline for leading zeros:

• If a value has the potential to exceed 1.0, use the leading zero.
• If a value can never exceed 1.0, do not use the leading zero.

Thus, because most units of measure have the potential to exceed 1.0, the leading zero is frequently needed. A value over 1.0 does not need to actually appear in the text.

We can apply this to CSS in a wise manner especially if we are accustomed to sharing code or following guidelines as a team:

• Include a leading zero for units such as rem, em or % (like the examples I outlined above). These values can exceed 1, so a leading zero should be specified.
• Properties such as opacity and the alpha value in rgba() need not use the leading zero as their value can never exceed 1.

Conclusion

It depends on your team, but you may or may not use the leading zero in CSS values – and that’s OK. I wrote this post because I only found out about it after looking at certain guidelines and frameworks that preferred their inclusion.

This post might also raise interesting thoughts about significant figures in decimal places, such as 0.02509580249 – when does this round up? Or down? I have included related links to this topic below.

Off-topic note: The title of this post required a quick background check – zeros and zeroes are both correct plural forms of the word zero, but zeros is more common.

Further Reading

• An Auto-Enforceable SCSS Styleguide
• Code Guide by @mdo
• Sub-pixel problems in CSS
• How many significant figures can a number have in CSS?