why does CSS Calc() function requires whitespaces before and after "+"or "-" operators ONLY

The requirement for whitespaces before and after the "+" or "-" operators in the CSS calc() function is a syntax rule designed to avoid potential parsing conflicts and improve readability.

The calc() function allows you to perform mathematical calculations within CSS property values. For example:

width: calc(100% - 20px);

In this example, the calc() function subtracts 20px from 100% to calculate the final width.

The reason for requiring whitespaces before and after the "+" or "-" operators is to distinguish them from other uses of "+" and "-" within CSS. CSS uses these symbols for various purposes, like defining positive and negative values, specifying relative positions, etc.

Without whitespaces, the CSS parser might have difficulty distinguishing between an arithmetic operator inside the calc() function and other CSS rules. Consider this example:

/* Ambiguous CSS */
width: calc(100%-20px);

In this case, the parser might interpret 100%-20px as a single value rather than recognizing it as an expression to evaluate with the calc() function. This could lead to invalid CSS or unexpected behavior.

By requiring whitespaces, the parser can reliably identify arithmetic operations within calc() and avoid such parsing conflicts. Additionally, it enhances code readability by making it clearer where calculations are taking place within the CSS rule.