Are periods allowed in CSS variable names?

Question

For example, can 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 is an example from the superfly-css-variables-colors module:

  :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%; } 

Answer 1

In CSS, property names are idents, and idents cannot contain a period. They can only contain letters, numbers, hyphens, and underscores. Therefore, property names cannot contain a period, property names.

Therefore, --Button.onHover not a valid custom property name (either the name of a CSS variable or whatever you want to call).