说说CSS3中的calc()属性

明天有人问到“CSS3中calc()属性加(+)、减(-)运算符为何必需加空格？”

说下团体的观念：

大体上是为了消弭歧义，深化的话，是由于解析器的标识的历史定义形成的，所以也算一个历史效果。

中心语法是

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

然后看值，再看DIMENSION，再翻一下DIMENSION定义：

DIMENSION{num}{ident}

再看{ident}

ident[-]?{nmstart}{nmchar}*

nmstart[_a-z]|{nonascii}|{escape}

nmchar[_a-z0-9-]|{nonascii}|{escape}

所以calc(20px-10px)会有歧义，在解析器看来，是值20以及未知单位px-10px。而乘号和除号就没有这个效果，所以有没有空格都是可以的。

其实觉得加减号表示正负也完全说的通，甚至十分方便记忆。比如 100%/2 – 2*2em 看起来就挺好。

规则加减号有空格应该也是权衡之举吧，至少最后的结果不是很混杂。