7

For example could I have a css variable named like this: --Button.onHover?

Note that CSS variables are different from CSS selectors (I have to explain this because someone marked this as a duplicate). Here's an example from the module superfly-css-variables-colors:

      :root {
        --percentage-lightest:  91%;
        --percentage-lighter:   78%;
        --percentage-light:     65%;
        --percentage-median:    52%;
        --percentage-dark:      39%;
        --percentage-darker:    26%;
        --percentage-darkest:   13%;

        --percentage-low: 25%;
        --percentage-high:  50%;

        --percentage-link-hover: 25%;
      }
Ole
  • 41,793
  • 59
  • 191
  • 359

1 Answers1

14

In CSS, property names are idents, and idents cannot contain a period. Per the CSS spec, they may only contain the characters [a-zA-Z0-9], hyphen -, underscore _, non-ASCII characters, as well as escaped versions of other characters. So it follows that property names cannot contain an unescaped period, and neither can custom property names.

Therefore, --Button.onHover is not a valid custom property name (or "CSS variable" name, or whatever you want to call it).

If you wanted to represent --Button.onHover as a valid CSS variable name, you'd have to escape the period, which can be done by prepending a backslash \ before it, or in the general case by running it through CSS.escape in JavaScript:

console.log(CSS.escape('--Button.onHover')) // --Button\.onHover
Lionel Rowe
  • 5,164
  • 1
  • 14
  • 27
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Bolt clock are you talking about selectors. The question is asking about variable names? – Ole Feb 18 '17 at 05:38
  • OK - Properties .... But the question is asking about [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) – Ole Feb 18 '17 at 05:42
  • @Ole: Yes, I'm referring to the same thing. The title of the css-variables spec is "Custom Properties for Cascading Variables". And the spec makes *numerous* references to "custom properties" and almost *none* to "variables" (including the text that Mike quotes in his answer!). Everyone else just likes to call them "CSS variables" to make themselves feel better about the lack of variable support in CSS over the last 20 years. But I prefer to call them by their proper name. – BoltClock Feb 18 '17 at 05:45
  • I don't see where it says that custom properties are idents. Also from a practical perspective it why would anyone care if a custom property contains a period in it? – Ole Feb 18 '17 at 06:13
  • It seems like the original answer is correct and the value syntax for custom properties is permissive because this section of text can only apply to the `--Foo` name. It cannot apply to variable values. – Ole Feb 18 '17 at 06:19
  • 1
    @Ole: "it's defined as any valid identifier that starts with two dashes" http://www.w3.org/TR/css-variables-1/#defining-variables Why would anyone care? Because the period has special meaning elsewhere in CSS (such as in, you guessed it, selectors!), and every browser would have to rewrite its CSS parser to accommodate custom prop names if they had their own grammar - all for the sake of allowing *one more, special character* in the *names* of properties that will never be defined in any future spec. Is it really worth the hassle? – BoltClock Feb 18 '17 at 06:58
  • @Ole: From the specs, it says this - *The production corresponds to this: it’s defined as any **valid identifier** that starts with two dashes.* and for an identifier as *A portion of the CSS source that has the same syntax as an *. So I agree with BoltClock's answer. – Harry Feb 18 '17 at 06:58
  • 1
    @Ole: The first argument in a var() expression is a custom property name, even though the var() expression itself is used in a property value. So, again, your question is about property names, not property values, and my comment on Mike's answer holds. – BoltClock Feb 18 '17 at 06:59
  • Dang it! I see what you are saying. Thanks for hashing this out with me. I was really liking my new naming convention for variables, but I'm going to have to revisit. – Ole Feb 18 '17 at 07:11
  • 1
    A nice visual of valid identifiers is [this railroad diagram of ident-token](https://www.w3.org/TR/css-syntax-3/#ident-token-diagram), which I admittedly missed. My mistake Ole, apologies. – Heretic Monkey Feb 19 '17 at 17:56
  • Strangely enough they are allowed non ASCII emojis: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram – run_the_race Aug 15 '22 at 09:30
  • @run_the_race: Well, it's only strange when you're working under the assumption that a programming language restricts tokens to the ASCII table. It's a common assumption people make, so no judgement there. – BoltClock Sep 09 '22 at 19:07