CSS
BEM methodology
Learn the Block, Element, Modifier naming methodology.
BEM: Block, Element, Modifier
BEM is a method for naming large interfaces consistently. The name comes from three pieces: a Block is a standalone component, an Element is a part of a block, a Modifier is a variant marking a state. Every class name combines these three ideas.
With BEM you read an element's role straight from its class. .card__title is a card's title; .button--primary is a button's prominent variant. Clashing styles shrink and the team shares one vocabulary.
Block: standalone component
A block is a component that stands on its own and carries its meaning from its name alone. Menu, search box, product card, hero section — each is a block. The name should be short, plain and reusable: .menu, .search, .card, .hero.
Block names do not nest; a block is never written as the child of another block. A card inside a menu is still just .card. This simplicity lets blocks travel anywhere in a project.
Element: part of a block
An element is a part of a block that has no meaning on its own. Its form: block name, double underscore, element name. .card__title, .menu__item, .search__input.
Elements are not used outside their blocks; .card__title makes sense because it is a card's title. Element names stay short and plain. A block can hold many elements, each following the same double-underscore rule.
Modifier: state and variant
A modifier marks a specific state or variant of a block or element. Its form: block or element name, double dash, modifier name. .button--primary is a prominent button; .menu__item--active is the selected menu item.
A modifier is never used alone; it always attaches to a block or element name. So .button--primary makes sense but .--primary does not. This keeps the modifier tied to its owner in the name itself.
Exercise Write the BEM class trio
Add three BEM declarations. First the .button block; it carries display: inline-flex and padding: 0.5rem 1rem. Second the .button__icon element; it carries width: 1.25rem. Third the .button--primary modifier; it carries background: navy and color: white.
Show example solution
/* add the button block, the icon element and the primary modifier */
.button {
display: inline-flex;
padding: 0.5rem 1rem;
}
.button__icon {
width: 1.25rem;
}
.button--primary {
background: navy;
color: white;
}
Test yourself
-
Which is a valid BEM element name?
.card__title {
font-weight: bold;
}
- .card--title
- .card_title
- .card__title
- .card-title
Show answer
.card__title — Correct. An element name follows the block name with a double underscore: .card__title.
-
Complete the element name
.menu______ {
padding: 0.5rem 1rem;
}
Show answer
.menu__item {
padding: 0.5rem 1rem;
}
-
Match each class name to its kind
- .button
- Block
- .button__icon
- Element
- .button--large
- Modifier
- .card__media--rounded
- Element + modifier
Next lesson: CSS organization
