naive-ui/design-notes/how-to-name-a-style-var.md

How to Name a Style Var

For example, you have a button, which has default and error type. How will you name the background color of the button.

buttonColor
errorButtonColor

or

buttonColor
buttonColorError

The second is the better (The second is easy to extend and read. Also it follow the css pattern for example padding-right and padding-left).

When it comes to hover style?

buttonColor
buttonColorHover
buttonColorError
buttonColorErrorHover <-

or

buttonColor
buttonColorHover
buttonColorError
buttonColorHoverError <-

The second is the better since if you want write a map entity, you always loop on types. For example:

// better
;['Default', 'Error'].map((type) => [
  'buttonColor' + type,
  'buttonColorHover' + type
])
// worse, hard to maintain
;['Default', 'Error'].map((type) => [
  'button' + type + 'Color',
  'buttonHover' + type + 'Color'
])