Member-only story
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 something like this.
<div class="menu">
...
<span class="menu__item--blue"></span>
<span class="menu__item--green"></span></div>
This way just by looking at a single elements class name, I can be clued into what the parent element is.
If you are using React the BEM formatting is as follows BlockName-ElemName_modName_modVal .
To read more about BEM conventions, see here.
