Explain the BEM naming convention

WHAT THIS TESTS This checks understanding of a widely used methodology for naming CSS classes so that styles stay predictable, low in specificity, and reusable across a large codebase. It also tests whether you avoid common misuses.

A GOOD ANSWER COVERS BEM stands for Block, Element, Modifier. A Block is a standalone, reusable component that means something on its own, like card or menu. An Element is a part that has no meaning outside its block, written with two underscores: card__title, card__image. A Modifier is a flag that changes appearance or state, written with two dashes: card--primary, card__title--large. The goals are flat specificity (single class selectors), no reliance on the DOM structure, and self-documenting names so anyone can infer the relationship from the class alone. Modifiers are added alongside the base class rather than replacing it.

COMMON WRONG ANSWERS Nesting elements to mirror the DOM, like card__body__title, which BEM explicitly discourages because elements belong to the block, not to each other. Using descendant or tag selectors that raise specificity and break the flat-selector promise. Treating a modifier as a replacement class instead of an addition.

LIKELY FOLLOW-UPS Why does BEM avoid nesting in selectors? How does BEM keep specificity manageable? How do modifiers compose with the base class? How does BEM compare with utility-first or with CSS modules?

ONE CONCRETE EXAMPLE A card has markup with a root class card, a heading with class card__title, an image with class card__image, and a primary variant where the root carries both card and card--primary. In CSS, .card styles the container, .card__title and .card__image style the parts, and .card--primary overrides colors, each as a single low-specificity class so overrides remain easy and the structure is obvious from the names.