Is "--" a valid CSS3 identifier?

Question

According the CSS Level 3 specification, for parsing the start of an identifier, you:

Check if three code points would start an identifier

Look at the first code point:

• If the first character is -, then we have a valid identifier if:
  1. The second code point is an identifier-start code point ([a-zA-Z_] or non-ASCII).
  2. The second code point is -.
  3. The second and third character form a valid escape.

Otherwise, we do not have a valid identifier start. After determining if we have a valid identifier start, the only requirements to have a valid <ident-token> is we have 0 or more of any combination of the following:

1. Escape tokens
2. ASCII letters
3. Digits
4. _ or -
5. Non-ASCII characters

Since we do not require any characters following an identifier start token, this would suggest that -- is a valid identifier, even if never supported by any browser or framework. However, even official CSS validation services (maintained by those that design the CSS specifications) do not consider this a valid identifier. Is this merely a bug in the validation service?

Answer 1

Yes it's valid and it works. It's the shortest custom property (aka CSS variable) that you can define:

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

Related: Can a css variable name start with a number?

Answer 2

The -- custom property identifier is reserved for future use, but current browsers incorrectly treat it as a valid custom property.

See also

• w3c/csswg-drafts#6313