Lesson 26 / 30

BEM Naming Convention

Name classes with BEM block, element and modifier conventions to keep CSS flat and predictable.

Block, Element, Modifier

BEM: .block a standalone component, .block__element a part inside it, .block--modifier a variant of the block. Everything stays a flat, low-specificity class.

BEM in HTML and CSS

No nested selectors — each class matches an intent directly.

<div class="card card--featured">
  <h3 class="card__title">Title</h3>
  <p class="card__body">Text</p>
</div>

Why bother

BEM avoids deeply nested selectors (.card .header .title), which keeps specificity low and predictable — so later rules override earlier ones without fighting the cascade.