BEM stands for Block-Element-Modifier. It names classes so a reusable CSS module, its parts, and its variations are recognizable at a glance. The conventions help organize styles, but they do not require every module to use every form. section 9.1.3
The three name forms have distinct jobs:
- A block names the main module, such as `message` or `media`. section 9.1.3
- An element names a part of its block with a double underscore, such as `media__image` or `media__body`. section 9.1.4
- A modifier names a variant with a double hyphen, such as `message--error`. Apply it alongside the base class; its rules need only change the properties that differ. section 9.1.3
Combine button variants
A button can use `button` with `button--large` for size, `button--success` for color, or both `button--danger` and `button--small`. Each modifier changes only its assigned properties, leaving the base button styles in place. section 9.1.3
Element names often let rules target a part directly without a descendant selector: `media__image` already identifies its module. A selector such as `.media__body > h4` can be simpler than another class, but it fixes the title to an `h4`. Use an element class instead when the heading tag may change. A `media--right` modifier can reverse the module’s layout without renaming its parts. section 9.1.4
Listing 9.8 Media module with subelements
@layer modules {
.media { #1
display: flex;
gap: 1.5em;
padding: 1.5rem;
background-color: #eee;
border-radius: 5px;
}
.media__image { #2
align-self: start;
}
.media__body { #2
overflow: auto;
margin-block-start: 0;
}
.media__body > h4 { #3
margin-block-start: 0;
color: #333;
}
}
Compare the direct element-class rules with the heading selector to see where naming replaces a descendant selector—and where the markup becomes more constrained. section 9.1.4
