Ex:calc(10px + 2px);
is correct
but
calc(10px +2px);
gives out an error
or
calc(10px - 2px);
is correct
but
calc(10px -2px);
gives out an error. However, this doesn't apply to other operators
Asked
Active
Viewed 154 times
-1

Amr
- 119
- 1
- 10
-
3How does it otherwise know that the `-` is supposed to be a minus and not part of a negative number – Reyno Jul 23 '23 at 16:54
-
That's why I included the `+` operator example because it shouldn't matter in that case – Amr Jul 23 '23 at 16:55
-
2Because the operation might get a little more complicated than `calc(10px +2px);`, like `calc(5px+-1px);` can't really work (it's `calc(5px + -1px);`? So it's always better to have whitespaces, even it looks nice. – Sally loves Lightning Jul 23 '23 at 17:05
-
2@Amr - it doesn't matter in the case of `+` for technical reasons. It's just required for consistency with `-`. The CSSWG resolution is here: https://lists.w3.org/Archives/Public/www-style/2008Nov/0147.html - see the last resolution on the page. The discussion about the real reason why the hyphen is problematic begins here: https://lists.w3.org/Archives/Public/www-style/2008Mar/0173.html (it's not about negative numbers) – Alohci Jul 23 '23 at 22:37
1 Answers
6
For the +
operator, the operation might get a little more complicated than calc(10px + 2px);
. I mean something like calc(5px + -1px);
is actually more complicated, and it can't be calc(5px+-1px);
.
For the -
operator, how CSS is supposed to know whether the -
is the minus operator or a part of a negative number? I mean logically though.
Also, the whitespaces make the code nice to read, for humans.
Learn more about the CSS calc()
function in the documentation.

Sally loves Lightning
- 952
- 16
-
So is it just to look nice and parser constraints? Because unlike any other language, the whitespace don't really matter – Amr Jul 23 '23 at 17:23
-
1
-
2"*For the - operator, how CSS is supposed to know whether the - is the minus operator or a part of a negative number? I mean logically though.*" By using basic parsing rules, like 'is this symbol immediately preceded by another symbol'. – TylerH Jul 24 '23 at 14:17