What is BEM Methodology?
BEM stands for:
- Block – A standalone component that is meaningful on its own.
- Element – A part of a block that has no standalone meaning but is semantically tied to the block.
- Modifier – A flag on a block or element that changes its appearance or behaviour.
Think of it like this: Blocks are the “big pieces,” elements are the “smaller parts inside the block,” and modifiers are “variants” of the block or element.
For example, consider a simple button component:
<button class="button button--primary">Click Me</button>
If the button had an icon inside it, it would be an element:
<button class="button button--primary">
<span class="button__icon">🔥</span>
Click Me
</button>
button__icon → Element
Why Use BEM?
- 1. Predictable Class Names – Once you understand the convention, you can read a class name and immediately know its role.
- 2. Avoid CSS Conflicts – Namespacing through blocks and elements reduces the risk of styles clashing.
- 3. Scalable CSS – Large projects with multiple developers benefit from a consistent structure.
- 4. Maintainable Code – Modifiers make it easy to adjust styles without creating entirely new classes.
