HuntExams Academy
HTML/CSSIntermediate#css#bem#methodology

What is BEM methodology?

BEM (Block Element Modifier) is a CSS naming convention: Block is a standalone component, Element is a part of the block (block__element), and Modifier is a variation (block--modifier or block__element--modifier). It avoids specificity wars and makes CSS predictable and reusable.

Example
.card {}
.card__title {}
.card__title--large {}
.card--featured {}
<div class="card card--featured">
  <h3 class="card__title card__title--large">Title</h3>
</div>

Related Questions

1
HTML/CSSAdvanced#css#methodology

What are other CSS methodologies besides BEM (OOCSS, SMACSS, ITCSS)?

Open
2
HTML/CSSIntermediate#css#sass

What are CSS preprocessors and what problems do they solve?

Open
3
HTML/CSSAdvanced#css#sass

What is the difference between a Sass mixin and a placeholder/extend?

Open