Class Naming Conventions

All classes follow the BEM naming convention, which is available on the Get BEM website.

Basic BEM Structure

The BEM methodology allows us to efficiently style large, complex projects. BEM is composed of three elements - blocks, elements and modifiers.

A BEM block refers to a standalone entity that is meaningful on its own. Examples of block classes could be header, input or button.

A BEM element is a part of a block that has no standalone meaning and is semantically tied to its block. Note that is different to a Codebots element. The CSS class for an element is formed as the block name + 2 underscores + the element name - block__element. Examples of element classes could be, header__title, or input__label.

A BEM modifier is flag that changes how a block or element looks or behaves. It is appended to the block or element class using two hyphens: block--modifier or block__element--modifier. Examples of modifier classes include input__label--red or btn--disabled.

Parent Classes

We can use parent classes (such as input-group or btn) as a prefix to create more specific class names for element states, child elements or wrappers.

State

State classes include the class of the parent element as a prefix, following the structure [parent-element]--[state].

Examples:

• input-group--is-required
• btn--warning

Child Elements

Child elements also use the class of the parent element as prefix. For example, a parent element of input--group could include many child elements, such as checkbox, radio or textarea.

Child elements follow the structure [parent-element]__[child-element].

Examples:

• input-group__checkbox
• input-group__radio
• input-group__textarea

Wrapper Classes

Wrapper classes may be used to wrap groups of parent elements. For example, multiple input-group elements could be organised into a specific layout. We used the structure [parent-element]-wrapper to name the wrapper class.

Example:

• input-group-wrapper

We can be more specific with our wrapper names by adding the element type as a modifier. This uses the structure [parent-element]-wrapper__[element-type].

Example:

• input-group-wrapper__radio