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.

Copy
Edit
<!-- components/0-readme/bem-resources.php --> <h5>Modified BEM naming system</h5> <p><em>This is a modification of standard BEM. I find it very easy to read.</em></p> <code> <pre> /* 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 {} </pre> </code> <h5>When to use BEM</h5> <p>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.</p> <h5>Keep BEM one level deep</h5> <p>Using a selector like <code class="inline">.block-element1-element2</code> presumes that <code class="inline">element2</code> will always be a child of <code class="inline">element1</code> in the markup, and you want to avoid that. Just stick to one level of nesting:</p> <div class="highlight"> <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"blockName"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"blockName__element1"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"blockName__element2"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span></code></pre> </div> <code> <pre> .blockName { &__element1 {} &__element2 {} } </pre> </code> <p>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.</p>
Copy
Copy
Edit
/* scss/0-readme/_bem-resources.scss */