BEM (Block, Element, Modifier) is a way to organize interface components and name their CSS classes. Its core test is simple: a component that can work independently is a block; a part that depends on that component is an element; and a modifier identifies a variation. The naming details can differ between projects, so use the convention your codebase already follows.
What is BEM?
BEM stands for Block, Element, Modifier. The BEM methodology documentation describes it as “a component-based approach to web development”: divide an interface into independent blocks that can be reused. The aim is to make components and their styles easier to reuse, not to guarantee a particular productivity gain.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Advanced HTML & CSS Interview Questions – Pro Edition: 500+ Expert-Level Questions, Real-World... | $9.99 | Buy on Amazon |
| 2 |
|
The Web | $11.00 | Buy on Amazon |
| 3 |
|
Charlotte's Web | $6.36 | Buy on Amazon |
| 4 |
|
BEM Methodology: Building Efficient Web Structures | $9.99 | Buy on Amazon |
| 5 |
|
AI: Is Humanity ready for Artificial Intelligence? | $11.00 | Buy on Amazon |
BEM is broader than a CSS naming pattern. Its documentation treats blocks as components that can bring together behavior, templates, styles, and other implementation technologies. In everyday front-end work, though, developers most often encounter BEM through class names.
What are blocks, elements, and modifiers?
Block: an independent component
A block is a functionally independent part of an interface, such as a menu, button, or search-form. Name it for what it does, not merely how it looks: button is more reusable than blue-rectangle. A block should also avoid taking control of its surroundings through external positioning or margins; that makes it easier to place in different contexts.
Element: a dependent part of a block
An element is a constituent part that has no standalone meaning outside its block. A menu item belongs to a menu, so the conventional name is menu__item. An input in a search form might be search-form__input. In the official convention, a double underscore joins the block name and element name.
BEM’s model does not have elements of elements. If a supposed nested subelement becomes complex, consider whether it should be its own block or whether the component boundary should change. The official naming convention explains this approach.
Rank #2
Modifier: a variation of a block or element
A modifier describes a real variation in appearance, state, behavior, or structure. For example, button button_size_s marks a small button while retaining the base button class. The base class supplies the component’s normal styling and behavior; the modifier adds the difference.
The official convention uses an underscore to separate a modifier and describes both Boolean and key-value forms. Other BEM-like systems may use different separators. The important idea is to express a variation without replacing the base entity, and to match the naming convention already used in the project.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRank #3
When is something a block versus an element?
Ask whether the piece can make sense and be reused on its own. If it can, it is a strong candidate for a block. If it only makes sense as part of a parent component, model it as an element.
- A
menucan be placed in different parts of an interface, so it is a block; itsmenu__itemdepends on that menu. - A search form can stand alone as
search-form; itssearch-form__inputis a part of that form. - If a part needs independent reuse or has grown into a substantial component, reconsider whether it should become a block rather than remain an element.
This is a design decision, not a rule about how deeply something appears in the DOM. A deeply nested node is not automatically an element of an element; choose names based on component meaning and independence.
How should BEM classes be used in CSS?
The BEM CSS guidance recommends styling through classes, avoiding ID and tag selectors as the basis for BEM styling, and keeping selector nesting shallow. These are BEM recommendations for keeping styles tied to named entities, not universal CSS laws.
Keep the base class alongside a modifier so the modifier does not need to repeat the block’s complete styling and behavior. Use descriptive names, and add a modifier only when there is a meaningful variation rather than to encode incidental page context.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →BEM also describes mixes: one DOM node can carry classes for multiple BEM entities. A mix is useful when the node needs the styles or behavior of more than one entity, or when shared formatting should be applied without relying on a group selector. For a variation of one block or element, use a modifier; for composition of multiple entities on the same node, consider a mix. The quick start also introduces redefinition levels for broader changes and context for cases where the content of a nested block is not known in advance.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How can BEM be introduced into an existing codebase?
BEM’s CSS guide recommends applying BEM to new components and updating existing code as needed, rather than requiring an all-at-once conversion. Where new BEM names must coexist with older styles, a prefix can distinguish the new classes. This is the guide’s migration approach; it does not mean every project needs to migrate.
- Follow the existing convention. Check how the codebase spells blocks, elements, and modifiers before adding new classes.
- Use BEM for new components. Start with a clear block name, then name its dependent elements and meaningful variants.
- Update old code when useful. Convert or replace existing styles as part of relevant component work rather than changing every selector at once.
- Separate new names if needed. Use a project-appropriate prefix when BEM classes need to coexist with older styles.
What BEM does—and does not—settle
BEM provides a component-oriented mental model and a naming convention. It does not determine every architectural choice, and its separator style is not universal across every system described as BEM-like. Projects still need to decide component boundaries and how class conventions fit their framework or design system.
The available official guidance describes BEM’s own practices, but does not establish a head-to-head winner against other CSS organization methods or provide measured adoption, speed, or defect-reduction results. A decision to use it should therefore rest on whether its explicit component names and composition model suit the codebase, not on an assumed benchmark.
For an institutional example of BEM-style class naming, see the UK Government Design System page-template guidance.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
