Search code examples
csssyntaxw3c-validationcss-variables

Can a css variable name start with a number?

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

Solution

  • 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>.

    enter image description here

    :root {
 --2222:red;
}

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