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