命名 css 颜色变量的最佳实践

Question

It's a basic question but I want to know when defining main colors for an application, should the color classes be named by their color:

pumpkin-orange , topaz , sky-blue , gray-color

Or by their meaning/function :

main-color , main-color-hover , secondary-color , link-color , disabled-color ...

Answer 1

You should avoid naming css classes by color. Use a functional name instead. I will advise you to have a look to BEM naming convention . I think it is a good start to have a structured approach of css.

Answer 2

Select the names by meaning.
Colors could change, bud the meaning stays.

It would be nice if the community could agree on common names. That way, you could use third-party code and their design would already be harmonised.

Here is an attempt:
https://github.com/nuxodin/css-variables-name-conventions