Classes Naming Conventions

Generalities

For the naming it is going to be used a variant of BEM approach.

• 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:

.sds__MiniWizard{}

Do:

.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:

.sds_textInput_error_errorMessage{}

Do:

.sds_textInput_errorBox{}
.sds_textInput_errorMessage{}

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.

Variants

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

Instead:

.sds_button_disabled{}

Do:

.sds_button--disabled{}