# BEM Naming Convention — CSS

Source: https://www.geekswithgeeks.com/en/css/css-bem

> Block__Element--Modifier — flat, predictable class names.

## 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.

```html
<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.