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 is we have 0 or more of any combination of the following:

Escape tokens
ASCII letters
Digits
_ or -
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?

user_8620333 · Answer

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?

user_5415066 · Answer

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

See also

Is "--" a valid CSS3 identifier?

2 Answers