BEM
BEM, or Block-Element-Modifier, is a CSS naming methodology that organizes classes around reusable blocks, their elements, and their modifiers.
CSS in Depth, Second Edition
Block-Element-Modifier is the expanded name of the BEM CSS naming methodology.
- How it is used
- Organizes CSS modules with class names that identify their parts and variants in component and page markup.
- How deep it goes
- Defines block, element, and modifier names, then works through variants and subelements without requiring strict use of every convention.
- Examples
- Demonstrates message variants, combinable button modifiers, and a multi-element media module with a reversed-layout variant.
- What you can do after
- Practice/perform it by naming module parts and applying variant classes alongside their base classes.
Tiny CSS Projects
BEM is a component-based CSS architecture that organizes interfaces into blocks, elements, and modifiers.
- How it is used
- Organizes reusable component styles and reduces naming collisions when CSS is not automatically scoped.
- How deep it goes
- Defines blocks, elements, and modifiers, then applies them to an interactive share component without treating BEM as a complete CSS system.
- Examples
- Uses a social-media share component with share, share__menu, share__button, and share_expanded classes.
- What you can do after
- Apply BEM to name and style reusable interface components with explicit structural and state-related classes.
Related concepts
- modifier classhas part · A modifier class is a CSS class representing a variation in a component's appearance, state, or behavior.
- CSS classconfigures · A name assigned to one or more document elements through a class attribute, allowing CSS selectors to match them and apply shared style declarations.
- component-based designkind of · Component-based design is a software design approach that constructs systems by composing reusable components with distinct responsibilities and defined interfaces.
- BEM elementhas part · A BEM element is a distinct part of a block, conventionally identified by a class name combining the block name with a double underscore.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.