Is "--" a valid CSS3 identifier?
Asked Answered
C

2

6

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?

Cabinet answered 12/4, 2021 at 23:0 Comment(0)
A
1

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

See also
Araujo answered 1/6, 2021 at 4:58 Comment(0)
G
8

It's not more valid now.


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?

Gault answered 12/4, 2021 at 23:3 Comment(3)
So are you suggesting that those official CSS validation services are bugged? Or is this just technically valid but practically invalid in some way?Fathom
@RobinBastiaan they aren't bugged but they are rarely updated to consider new stuff. A lot of valid new things will fail in the validator. What I am showing is perfectly valid and you can use it with no issue (even if not recommended as a good practise)Gault
I think setting the background of body to red is almost always good practice.Kilgore
A
1

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

See also
Araujo answered 1/6, 2021 at 4:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.