# Classes Naming Conventions

### Generalities

{% hint style="info" %}
For the naming it is going to be used a variant of BEM approach.
{% endhint %}

* Use one single underscore instead of a double one (Like in classic BEM approach) for a better readability.
* All classes are going to have the prefix `sds_` before the component's name. This will help to identify better that the class belongs to the `@2600hz/sds_react_components` library.
* Classes are going to follow the camel case on their naming instead of pascal case.

Instead:

```scss
.sds__MiniWizard{}
```

Do:

```scss
.sds_miniWizard{}
```

### Short Names (No Nested Structures)

To avoid long and repetitive classes, the class is no longer going to follow a nested structure approach, instead it will have as identifier the first name after the `sds_` prefix, and then the section's name.

Instead:

```scss
.sds_textInput_error_errorMessage{}
```

Do:

```scss
.sds_textInput_errorBox{}
.sds_textInput_errorMessage{}
```

<figure><img src="https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2F7s9UviuTCIEhCa7gVWF5%2Fimagen.png?alt=media&#x26;token=13e886db-86c2-41fd-8889-16de14a464f2" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
There might be some exceptions for nested or complex components, where indicating a nested structure might be a good idea to keep everything in order.
{% endhint %}

### Variants

Following BEM approach, to have a better and more visual hint on component's variant, it can identify like this:

Instead:

```scss
.sds_button_disabled{}
```

Do:

```scss
.sds_button--disabled{}
```
