Skip to content

BEM naming convention

CSS & HTML classes use the BEM convention for their naming convention
This blog 1 explains it well

BEM convention

B block

.stick-man {}

E element

.stick-man__arms {}

M modifier

.stick-man--green {}

combined:

.stick-man__arms--green {}

These are all class names for an HTML element

<div class="stick-man__arms--green js-site-navigation">

Renaming breaks JavaScript

To prevent the site breaking when renaming classes without knowing you have to rename in JavaScript , explicitly start class names with js-* if referenced in JavaScript.

A Philosophy of Software Design: Non explicit references can lead to complex code

<div class="site-navigation js-site-navigation"></div>

const nav = document.querySelector('.js-site-navigation')

Spaces in class name

A class name can’t have spaces. A space-separated string in your class attribute, gives your element several classes.

naming convention

web development