0-readme edit
bem-resources edit
Modified BEM naming system
This is a modification of standard BEM. I find it very easy to read.
/* Component */
.ComponentName {}
/* Component modifier */
.ComponentName.--modifierName {}
/* Component descendant */
.ComponentName__descendant {}
/* Component descendant modifier */
.ComponentName__descendant.--modifierName {}
/* Component state (scoped to component) */
.ComponentName.--is-stateOfComponent {}
// other name conventions not using BEM
/* Helper */
.h-helper-name {}
/* Layout */
.l-layout-name {}
When to use BEM
Switch to BEM mode when coding anything that can be encapsulated and reused in multiple places. There's no need to use BEM for layout classes, helper classes, base styles and scaffolding.
Keep BEM one level deep
Using a selector like .block-element1-element2
presumes that element2
will always be a child of element1
in the markup, and you want to avoid that. Just stick to one level of nesting:
<div class="blockName">
<div class="blockName__element1">
<div class="blockName__element2"></div>
</div>
</div>
.blockName {
&__element1 {}
&__element2 {}
}
This is a better solution in two ways: your selectors will be shorter and prettier, and you can easily make changes to your HTML markup without having to refactor a bunch of CSS classes.