Are periods allowed in CSS variable names?

Question

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

Answer 1

In CSS, property names are idents, and idents cannot contain a period. They may only contain letters, numerals, the hyphen-minus and the underscore. So it follows that property names cannot contain a 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).