4 min read
•Question 17 of 49easyWhat is BEM Methodology?
Understanding Block Element Modifier naming convention.
What You'll Learn
- BEM naming convention
- Blocks, Elements, Modifiers
- Benefits of BEM
BEM Structure
| Component | Syntax | Example |
|---|---|---|
| Block | .block | .card |
| Element | .block__element | .card__title |
| Modifier | .block--modifier | .card--featured |
Example
index.htmlHTML
<div class="card card--featured">
<img class="card__image" src="..." />
<h2 class="card__title">Title</h2>
<p class="card__description">Description</p>
<button class="card__button card__button--primary">Click</button>
</div>styles.cssCSS
.card { }
.card--featured { border: 2px solid gold; }
.card__title { font-size: 1.5rem; }
.card__button { padding: 10px 20px; }
.card__button--primary { background: blue; }Benefits
- Avoids specificity issues
- Self-documenting class names
- Reusable components