BEM Methodology

Definition

Block Element Modifier (BEM) is a highly popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between HTML and CSS in a given project.

Explain Like I'm New

Naming CSS classes is the hardest part of CSS. If you name a class `.title`, it might conflict with another `.title` somewhere else on your site. BEM solves this with strict naming rules: Block (`.card`), Element (`.card__title`), and Modifier (`.card--dark`).

Real World Example

Instead of writing `.button .text .icon`, you write `.button`, `.button__text`, and `.button__icon`. You know instantly that these elements belong to the button.

Common Use Cases

•Large team projects
•Preventing CSS conflicts without using scoped CSS

Interactive Example

Interview Questions

basic

In the class `.menu__item--active`, what is the Block, Element, and Modifier?

intermediate

Why does BEM avoid using descendant selectors like `.card p`?

Flash Cards

Question

Break it down.

Click to reveal answer

Answer

Block: `menu`. Element: `item` (indicated by `__`). Modifier: `active` (indicated by `--`).

Question

Why avoid descendant selectors?

Click to reveal answer

Answer

Because of specificity. `.card p` takes higher priority than just `p`. If you later try to override the paragraph color, you'll be forced to use `!important` or write even longer selectors. BEM ensures almost every CSS rule has a low, flat specificity of exactly 1 class (10 points).