Can a css variable name start with a number?

Question

I want to know if it is valid to define a css variable that starts with a number like this,

:root { --1space: 32px; }

this works just fine with Chrome, however that code is not being validated by https://jigsaw.w3.org/css-validator/ also VSCode draws a red line under the variable name.

if css variable names are idents then it should be ok to start with a number by this diagram;

https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

Answer 1

Yes it's valid. If we follow the definition in the speficiation :

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo . The <custom-property-name> production corresponds to this: it's defined as any valid identifier that starts with two dashes

And

identifier

A portion of the CSS source that has the same syntax as an <ident-token> . Also appears in <at-keyword-token> , <function-token> , <hash-token> with the "id" type flag, and the unit of <dimension-token> .

 :root { --2222:red; } body { background:var(--2222); }