Detailed explanation
BEM stands for Block, Element, Modifier. It is a methodology for organising interface components, best known for its CSS class naming convention. A block is an independently meaningful component, such as a card, navbar, or search form. An element is a part of that block that has no standalone meaning within the component design, such as a card’s title. A modifier describes a variation in appearance, state, or behaviour, such as a featured card or a larger title. BEM makes these relationships explicit in class names rather than leaving developers to infer them from selectors or HTML structure.
In the common naming style, the block uses `.card`, an element uses `.card__title`, and modifiers use `.card--featured` or `.card__title--large`. Double underscores separate a block from an element; double hyphens introduce a modifier. Keep the base class when adding a modifier: `<div class="card card--featured"><h3 class="card__title card__title--large">Title</h3></div>`. The base classes define shared styling, while modifier rules supply targeted changes. An element’s name refers directly to its block, not its complete DOM ancestry, so a title inside a wrapper still uses `card__title`, not `card__wrapper__title`.
Under the hood, browsers treat BEM names as ordinary class names; BEM requires no special CSS feature or runtime. Its benefit comes from consistently using explicit, usually single-class selectors. Both `.card__title` and `.card__title--large` have specificity of 0-1-0, avoiding unnecessary escalation through IDs or deeply nested selectors. When competing declarations have equal cascade priority and specificity, the later rule wins. Modifier rules therefore normally follow the relevant base rules. BEM reduces specificity conflicts but does not override cascade rules, prevent inheritance, or provide true style encapsulation.
BEM matters when several developers maintain a growing interface: descriptive names clarify ownership, reduce accidental naming collisions, and make components easier to reuse or restructure. Interviewers usually look for correct syntax, sensible component boundaries, and an understanding of why flatter selectors help maintenance. They may also expect trade-offs: class names become verbose, and the team must apply the convention consistently. Use BEM to express component relationships, not to reproduce every nested HTML tag.
Key points to remember
- Block: a standalone component, named `card`.
- Element: a block-owned part, named `card__title`.
- Modifier: a variation, named `card--featured` or `card__title--large`.
- Apply modifier classes alongside their corresponding base classes.
- Prefer flat class selectors; BEM reduces specificity conflicts but does not eliminate the cascade.
Common mistakes candidates make
- Using only a modifier class and omitting the base class that supplies shared styles.
- Mirroring DOM nesting in names such as `card__body__title` instead of `card__title`.
- Claiming BEM guarantees style isolation or using deeply nested selectors that undermine its maintainability benefits.
Likely follow-up questions
Can a block be nested inside another block?
Yes, a standalone block can appear inside another block, such as a button inside a card. Its own elements retain that block’s names, such as `button__icon`, rather than adopting the parent block’s prefix.
How do you decide whether something is a block or an element?
Treat it as a block if it is independently meaningful and could be used in other contexts. Treat it as an element if it primarily serves as a part of a particular component, such as `card__title`.
How is BEM different from CSS Modules?
BEM is a naming convention that developers follow manually; its classes remain ordinary globally addressable CSS classes. CSS Modules typically generate locally scoped class names through build tooling, and BEM-style names can still be used within them.
Interview tip: Define the three terms, explain the card example, and connect flat selectors to predictable styling while acknowledging that normal cascade rules still apply.