Developer Docs

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 classes include the class of the parent element as a prefix, following the structure [parent-element]--[state].


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


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.


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


Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.







On this page

New to Codebots?

We know our software can be complicated, so we are always happy to have a chat if you have any questions.