BEM Naming Convention

Jack
Nov 22, 2020

BEM , or block-element-modifier, is a CSS class naming convention that is often overlooked by most bootcamp grads. Keeping ones class naming clean and organized allows one to both read and write CSS more easily. It especially comes in handy when chaining in SCSS.

Does your HTML look like this?

<div class="menu">
...
<span class="item-thats-blue"></span>
<span class="item-thats-green"></span>
</div>

The BEM formatting is as follows block-name__elem-name--mod-name--mod-val. So the above code should look…

--

--

Jack

Magician, Mathematician, and Software Engineer