7900 shaares
161 private links
161 private links
- Consider mixing kebab-casing with camelCasing:
--system-color-controlAccent: blue;
- Using namespaces can help to avoid collision. In the upper example:
system
is a namespace. - Value typing hints to the use cases of the variable. In the upper example:
color
. It could befontSize
for example - Descriptive names can use 2 patterns:
icyBlue
which is value-based oraccent
which is usage-based. - 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