Are spaces allowed in CSS variable names?

No, spaces are not allowed in CSS variable names. CSS variables, also known as custom properties, must adhere to specific naming conventions.

Here's a breakdown of why and what you should use instead:

Why Spaces Are Not Allowed:

- CSS syntax requires variable names to be a single, continuous identifier. Spaces would break this rule, making it impossible for the CSS parser to correctly interpret the variable name.

- The CSS parser uses spaces to separate different parts of a CSS rule, such as selectors, properties, and values. If spaces were allowed in variable names, it would create ambiguity and parsing errors.

Valid CSS Variable Naming Conventions:

- CSS variable names must start with two hyphens (--), followed by at least one character.

- Variable names are case-sensitive. For example, --my-color is different from --My-Color.

- Variable names can contain letters (a-z, A-Z), numbers (0-9), hyphens (-), and underscores (_).

- It is common practice to use hyphens to separate words in a variable name (e.g., --main-background-color). This improves readability.

Examples of Valid and Invalid Variable Names:

- Valid:

- --primary-color

- --font-size

- --my_variable

- --element-1

- Invalid:

- --primary color (contains a space)

- --1variable (starts with a number)

- -- (empty variable name after the hyphens)

Best Practices:

- Use descriptive names that clearly indicate the purpose of the variable.

- Maintain consistency in your naming conventions throughout your stylesheet.

- Avoid overly long variable names, but prioritize clarity over brevity.

In summary, always use hyphens or underscores to separate words in CSS variable names and avoid spaces to ensure your CSS is valid and works as expected.

Learn more about this