foundation

BEM

Use block, element, and modifier naming to make global CSS relationships explicit and predictable.

BEM (Block, Element, Modifier) names global CSS by component ownership: `block`, `block__element`, `block--modifier`. Selectors stay shallow, which lowers specificity and makes relationships explicit without build-time scoping.

					.card { }
.card__title { }
.card__body { }
.card--featured { }
.card--featured .card__title { } /* state on block affects element */

BEM fits teams shipping plain CSS or SCSS without CSS Modules. It does not enforce isolation — discipline and code review still matter.

On interviews: compare BEM with CSS Modules, utility CSS, and deep nested selectors in large codebases.

Common pitfalls: every descendant becomes an element (bloated API); modifiers chained without clear block ownership.

The trade-off is verbose class names versus grep-friendly, low-specificity global CSS.

Checklist:

Name by component block, not page region alone.
Keep selectors one block deep when possible.
Use modifiers for variants and state.
Do not leak internal elements across blocks.