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:

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