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
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
s are always interpreted as s or s, "unitless 0" s aren’t supported in math functions. That is, width: calc(0 + 5px); is invalid, because it’s trying to add a to a , 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; }
width: calc(300px + 0px);
width: calc(300px + 0);
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.