BEM (Block Element Modifier) has three parts: Block, Element, and Modifier. Each part does a different job.
Block is a key standalone component that displays a vital part of the user interface, such as a card, menu, or form.
Element is a part of a Block that has a specific job inside it.
For example:
card__title→ the title inside a cardform__input→ the input field inside a form
Modifier tells how a Block or Element looks, behaves, or changes its state.
For example:
card--highlighted→ makes the card stand outbutton--disabled→ makes the button inactive
BEM works as a naming style, which means the class names in your CSS file stay organized, easy to read, and reusable.
This way, you can use them later without mixing up code with other classes.
Syntax:
Structure:
block__element--modifier
Where:
- Block → The main component that contains both Element & Modifier.
- Element → A part of the Block that performs a specific role inside it (like a title or button inside a card).
- Modifier → Defines the behavior, style, or state applied to a Block or Element (like highlighted, active, or disabled).
Example:
<div class="card card--highlighted">
<h2 class="card__title">Product Name</h2>
<p class="card__description">Details about the product</p>
</div>
Output:
Product Name
Details about the product