Class Naming Conventions
By Nicola D'Andrea 5 September 2019 Best Practice Guidelines
How Codebots uses the BEM naming conventions to structure CSS classes
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
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,
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__element--modifier. Examples of modifier classes include
We can use parent classes (such as
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
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
Child elements follow the structure
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