1. Consider mixing kebab-casing with camelCasing: --system-color-controlAccent: blue;
2. Using namespaces can help to avoid collision. In the upper example: system is a namespace.
3. Value typing hints to the use cases of the variable. In the upper example: color. It could be fontSize for example
4. Descriptive names can use 2 patterns: icyBlue which is value-based or accent which is usage-based.
5. Dark mode is simpler with usage-based variables

When to use between value- and usage-base?

Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.

Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.

There are often 3 levels of abstractions:

• defining the values
• different property for custom controls such as --color-accentColor
• the CSS variable of use in the component such as --button-color