midCSS
What is BEM methodology?
Updated Apr 28, 2026
Short answer
BEM (Block, Element, Modifier) is a component-based approach to web development and CSS naming.
Deep explanation
BEM keeps CSS flat and prevents specificity wars. A Block is a standalone entity (e.g., card). An Element is a part of a block (e.g., card__title). A Modifier changes the appearance or behavior (e.g., card--dark).
Real-world example
Structuring styles for a large e-commerce UI system to prevent component styles from bleeding into each other.
Common mistakes
- Nesting BEM classes too deeply like `.block__elem1__elem2`, which violates the flat structure rule.
Follow-up questions
- How does BEM help with performance?