A modifier class marks an intentional variation of a CSS module. Keep the module’s base class on the element, then add a modifier for what changes. An error message, for example, can retain the message module’s padding and shape while changing its colors. section 9.1.3
Make variants recognizable and reusable:
- Name the modifier after its module. BEM uses a double hyphen, as in message--error, to distinguish a modifier from a child-element class such as media__image. section 9.1.3
- Put shared styles on the base class. A modifier needs to override only the properties that differ; message--success, message--warning, and message--error change color, border color, and background color. section 9.1.3
- Prefer a role such as button--danger or button--success over button--red or button--blue. Relative sizes such as button--large can work; a precise name such as button--20px is harder to preserve through a redesign. section 9.2.2
Listing 9.6 Button module and modifiers
@layer modules {
.button { #1
padding: 0.5em 0.8em;
border: 1px solid #265559;
border-radius: 0.2em;
background-color: transparent;
font-size: 1rem;
}
.button--success { #2
border-color: #cfe8c9;
color: #fff;
background-color: #2f5926;
}
.button--danger { #3
border-color: #e8c9c9;
color: #fff;
background-color: #a92323;
}
.button--small { #4
font-size: 0.8rem;
}
.button--large { #5
font-size: 1.2rem;
}
}
The button rules separate shared styling from success, danger, small, and large variations. The companion markup combines button--danger with button--small on one button. section 9.1.3
Reverse a module’s layout
A modifier can change layout as well as color. Add media--right alongside media on the main element, then set flex-direction: row-reverse to place the image on the right. When a variation must change a child instead, target it with a selector such as .media--right .media__image. section 9.1.4
