BEM Methodology 🏗️
Create scalable, maintainable CSS with Block, Element, Modifier methodology.
What is BEM Methodology?
BEM (Block, Element, Modifier) is a popular naming convention for CSS classes that makes your code more readable, maintainable, and scalable. It provides a structured way to organize your CSS and create reusable components.
🧱 Block
Standalone component that is meaningful on its own
🔗 Element
Part of a block that has no standalone meaning
🎨 Modifier
Flag that changes appearance or behavior
BEM Basics
Core Concepts:
- Block: .block - A standalone component
- Element: .block__element - A part of a block
- Modifier: .block--modifier - A variation of a block or element
- Naming Convention: Uses double underscore and double dash
- Independence: Blocks should be reusable and independent
BEM Basics Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEM Methodology - Block Element Modifier</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.concept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.concept-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
}
.concept-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.naming-examples {
background: white;
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.example-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.good-example, .bad-example {
padding: 1.5rem;
border-radius: 10px;
font-family: 'Fira Code', monospace;
}
.good-example {
background: #d4edda;
border-left: 4px solid #28a745;
}
.bad-example {
background: #f8d7da;
border-left: 4px solid #dc3545;
}
.demo-area {
background: white;
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* BEM Demo Styles */
.card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
margin: 1rem 0;
}
.card__header {
background: #3498db;
color: white;
padding: 1.5rem;
}
.card__title {
font-size: 1.5rem;
margin: 0;
}
.card__body {
padding: 1.5rem;
}
.card__text {
color: #34495e;
line-height: 1.6;
margin-bottom: 1rem;
}
.card__footer {
background: #ecf0f1;
padding: 1rem 1.5rem;
border-top: 1px solid #bdc3c7;
}
.card--featured {
border: 3px solid #e74c3c;
transform: scale(1.02);
}
.card--featured .card__header {
background: #e74c3c;
}
.button {
display: inline-block;
padding: 1rem 2rem;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
text-align: center;
}
.button--primary {
background: #3498db;
color: white;
}
.button--primary:hover {
background: #2980b9;
transform: translateY(-2px);
}
.button--secondary {
background: #95a5a6;
color: white;
}
.button--large {
padding: 1.5rem 3rem;
font-size: 1.2rem;
}
.button--disabled {
opacity: 0.6;
cursor: not-allowed;
}
.button--disabled:hover {
transform: none;
}
.menu {
background: #34495e;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
.menu__list {
list-style: none;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.menu__item {
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background 0.3s ease;
}
.menu__item:hover {
background: #3498db;
}
.menu__link {
color: white;
text-decoration: none;
display: block;
}
.menu__item--active {
background: #e74c3c;
}
.menu__item--active:hover {
background: #c0392b;
}
.form__group {
margin: 1rem 0;
}
.form__label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #2c3e50;
}
.form__input {
width: 100%;
padding: 1rem;
border: 2px solid #bdc3c7;
border-radius: 5px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form__input:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.form__input--error {
border-color: #e74c3c;
}
.form__error {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 0.5rem;
}
@media (max-width: 768px) {
.example-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.menu__list {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🏗️ BEM Methodology</h1>
<p>Block, Element, Modifier - A robust naming convention for CSS</p>
</div>
<div class="concept-grid">
<div class="concept-card">
<div class="concept-icon">🧱</div>
<h3>Block</h3>
<p>A standalone component that is meaningful on its own</p>
<div class="good-example" style="margin-top: 1rem;">
.card<br>
.menu<br>
.button
</div>
</div>
<div class="concept-card">
<div class="concept-icon">🔗</div>
<h3>Element</h3>
<p>A part of a block that has no standalone meaning</p>
<div class="good-example" style="margin-top: 1rem;">
.card__title<br>
.menu__item<br>
.button__icon
</div>
</div>
<div class="concept-card">
<div class="concept-icon">🎨</div>
<h3>Modifier</h3>
<p>A flag that changes the appearance or behavior</p>
<div class="good-example" style="margin-top: 1rem;">
.card--featured<br>
.menu--vertical<br>
.button--disabled
</div>
</div>
</div>
<div class="naming-examples">
<h2>📝 BEM Naming Convention</h2>
<div class="example-grid">
<div class="good-example">
<h4>✅ Good BEM Names</h4>
<div style="margin-top: 1rem;">
.search-form<br>
.search-form__input<br>
.search-form__button<br>
.search-form__button--submit<br>
.search-form--compact
</div>
</div>
<div class="bad-example">
<h4>❌ Poor CSS Names</h4>
<div style="margin-top: 1rem;">
.searchForm<br>
.search_input<br>
.search-button<br>
.submit-btn<br>
.compact-search
</div>
</div>
</div>
</div>
<div class="demo-area">
<h2>🚀 BEM in Action</h2>
<h3>Card Component</h3>
<div class="card">
<div class="card__header">
<h3 class="card__title">Regular Card</h3>
</div>
<div class="card__body">
<p class="card__text">This is a regular card using BEM methodology.</p>
<a href="#" class="button button--primary">Learn More</a>
</div>
</div>
<div class="card card--featured">
<div class="card__header">
<h3 class="card__title">Featured Card</h3>
</div>
<div class="card__body">
<p class="card__text">This featured card uses a modifier to change its appearance.</p>
<a href="#" class="button button--primary button--large">Featured Action</a>
</div>
</div>
<h3>Button Variants</h3>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0;">
<button class="button button--primary">Primary</button>
<button class="button button--secondary">Secondary</button>
<button class="button button--primary button--large">Large</button>
<button class="button button--primary button--disabled">Disabled</button>
</div>
<h3>Navigation Menu</h3>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item menu__item--active">
<a href="#" class="menu__link">Home</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">About</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Services</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Contact</a>
</li>
</ul>
</nav>
<h3>Form with Validation</h3>
<form style="max-width: 400px;">
<div class="form__group">
<label class="form__label" for="email">Email Address</label>
<input type="email" id="email" class="form__input" placeholder="Enter your email">
</div>
<div class="form__group">
<label class="form__label" for="password">Password</label>
<input type="password" id="password" class="form__input form__input--error" placeholder="Enter your password">
<div class="form__error">Password must be at least 8 characters</div>
</div>
<button type="submit" class="button button--primary">Sign In</button>
</form>
</div>
<div class="card">
<h3>💡 Why Use BEM?</h3>
<ul>
<li><strong>Clarity:</strong> Clear relationship between HTML and CSS</li>
<li><strong>Modularity:</strong> Components are self-contained and reusable</li>
<li><strong>Scalability:</strong> Works well in large projects and teams</li>
<li><strong>Maintainability:</strong> Easy to understand and modify</li>
<li><strong>Specificity Control:</strong> Avoids CSS specificity wars</li>
<li><strong>Team Collaboration:</strong> Consistent naming across team members</li>
</ul>
</div>
</div>
</body>
</html>BEM with Sass
Sass Nesting
Use Sass nesting with the & parent selector for clean BEM implementation.
.block {
&__element {
// styles
}
&--modifier {
// modified styles
}
}
Component Organization
Organize BEM components in separate Sass files for better maintainability.
components/
├── _button.scss
├── _card.scss
├── _form.scss
└── _navigation.scss
BEM with Sass Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEM with Sass - Advanced Implementation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.feature-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.code-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.sass-code, .css-code {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.8rem;
line-height: 1.4;
overflow-x: auto;
}
.comment { color: #7f8c8d; }
.selector { color: #9b59b6; }
.property { color: #3498db; }
.value { color: #2ecc71; }
.ampersand { color: #e74c3c; font-weight: bold; }
.demo-section {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
/* Advanced BEM Components */
.media {
display: flex;
gap: 1rem;
margin: 1rem 0;
align-items: flex-start;
}
.media__image {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.media__body {
flex: 1;
}
.media__title {
font-weight: bold;
margin-bottom: 0.5rem;
color: #2c3e50;
}
.media__content {
color: #7f8c8d;
line-height: 1.6;
}
.media--reverse {
flex-direction: row-reverse;
}
.media--center {
align-items: center;
}
.media--small .media__image {
width: 50px;
height: 50px;
}
.grid {
display: grid;
gap: 1rem;
margin: 1rem 0;
}
.grid--2-col {
grid-template-columns: repeat(2, 1fr);
}
.grid--3-col {
grid-template-columns: repeat(3, 1fr);
}
.grid--4-col {
grid-template-columns: repeat(4, 1fr);
}
.grid__item {
background: #3498db;
color: white;
padding: 2rem;
border-radius: 5px;
text-align: center;
}
.alert {
padding: 1rem 1.5rem;
border-radius: 5px;
margin: 1rem 0;
border-left: 4px solid transparent;
}
.alert--success {
background: #d4edda;
border-color: #28a745;
color: #155724;
}
.alert--warning {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
}
.alert--error {
background: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.alert--info {
background: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
}
.pagination {
display: flex;
gap: 0.5rem;
margin: 2rem 0;
}
.pagination__item {
padding: 0.5rem 1rem;
border: 1px solid #bdc3c7;
border-radius: 3px;
text-decoration: none;
color: #3498db;
transition: all 0.3s ease;
}
.pagination__item:hover {
background: #3498db;
color: white;
border-color: #3498db;
}
.pagination__item--active {
background: #3498db;
color: white;
border-color: #3498db;
}
.pagination__item--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination__item--disabled:hover {
background: transparent;
color: #3498db;
border-color: #bdc3c7;
}
.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
margin: 0 0.25rem;
}
.badge--primary {
background: #3498db;
color: white;
}
.badge--success {
background: #27ae60;
color: white;
}
.badge--warning {
background: #f39c12;
color: white;
}
.badge--error {
background: #e74c3c;
color: white;
}
.badge--outline {
background: transparent;
border: 1px solid currentColor;
}
@media (max-width: 768px) {
.feature-grid {
grid-template-columns: 1fr;
}
.code-comparison {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.grid--2-col,
.grid--3-col,
.grid--4-col {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚡ BEM with Sass</h1>
<p>Combine BEM methodology with Sass for powerful, maintainable CSS</p>
</div>
<!-- BEM with Sass Nesting -->
<div class="feature-card">
<h3>🏗️ BEM + Sass Nesting</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// BEM with Sass nesting</span><br>
<span class="selector">.card</span> {<br>
<span class="property">background</span>: <span class="value">white</span>;<br>
<span class="property">border-radius</span>: <span class="value">10px</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 4px 8px rgba(0,0,0,0.1)</span>;<br><br>
<span class="selector">&__header</span> {<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
<span class="property">padding</span>: <span class="value">1.5rem</span>;<br>
}<br><br>
<span class="selector">&__title</span> {<br>
<span class="property">font-size</span>: <span class="value">1.5rem</span>;<br>
<span class="property">margin</span>: <span class="value">0</span>;<br>
}<br><br>
<span class="selector">&--featured</span> {<br>
<span class="property">border</span>: <span class="value">3px solid #e74c3c</span>;<br>
<span class="property">transform</span>: <span class="value">scale(1.02)</span>;<br><br>
<span class="selector">&__header</span> {<br>
<span class="property">background</span>: <span class="value">#e74c3c</span>;<br>
}<br>
}<br>
}
</div>
<div class="css-code">
<span class="selector">.card</span> {<br>
<span class="property">background</span>: <span class="value">white</span>;<br>
<span class="property">border-radius</span>: <span class="value">10px</span>;<br>
<span class="property">box-shadow</span>: <span class="value">0 4px 8px rgba(0,0,0,0.1)</span>;<br>
}<br><br>
<span class="selector">.card__header</span> {<br>
<span class="property">background</span>: <span class="value">#3498db</span>;<br>
<span class="property">color</span>: <span class="value">white</span>;<br>
<span class="property">padding</span>: <span class="value">1.5rem</span>;<br>
}<br><br>
<span class="selector">.card__title</span> {<br>
<span class="property">font-size</span>: <span class="value">1.5rem</span>;<br>
<span class="property">margin</span>: <span class="value">0</span>;<br>
}<br><br>
<span class="selector">.card--featured</span> {<br>
<span class="property">border</span>: <span class="value">3px solid #e74c3c</span>;<br>
<span class="property">transform</span>: <span class="value">scale(1.02)</span>;<br>
}<br><br>
<span class="selector">.card--featured .card__header</span> {<br>
<span class="property">background</span>: <span class="value">#e74c3c</span>;<br>
}
</div>
</div>
</div>
<!-- Media Object Component -->
<div class="feature-card">
<h3>🎭 Media Object Component</h3>
<div class="code-comparison">
<div class="sass-code">
<span class="comment">// Media object with variants</span><br>
<span class="selector">.media</span> {<br>
<span class="property">display</span>: <span class="value">flex</span>;<br>
<span class="property">gap</span>: <span class="value">1rem</span>;<br>
<span class="property">align-items</span>: <span class="value">flex-start</span>;<br><br>
<span class="selector">&__image</span> {<br>
<span class="property">width</span>: <span class="value">80px</span>;<br>
<span class="property">height</span>: <span class="value">80px</span>;<br>
<span class="property">border-radius</span>: <span class="value">8px</span>;<br>
<span class="property">object-fit</span>: <span class="value">cover</span>;<br>
}<br><br>
<span class="selector">&__body</span> {<br>
<span class="property">flex</span>: <span class="value">1</span>;<br>
}<br><br>
<span class="selector">&--reverse</span> {<br>
<span class="property">flex-direction</span>: <span class="value">row-reverse</span>;<br>
}<br><br>
<span class="selector">&--center</span> {<br>
<span class="property">align-items</span>: <span class="value">center</span>;<br>
}<br><br>
<span class="selector">&--small</span> {<br>
<span class="selector">&__image</span> {<br>
<span class="property">width</span>: <span class="value">50px</span>;<br>
<span class="property">height</span>: <span class="value">50px</span>;<br>
}<br>
}<br>
}
</div>
<div class="css-code">
<span class="selector">.media</span> {<br>
<span class="property">display</span>: <span class="value">flex</span>;<br>
<span class="property">gap</span>: <span class="value">1rem</span>;<br>
<span class="property">align-items</span>: <span class="value">flex-start</span>;<br>
}<br><br>
<span class="selector">.media__image</span> {<br>
<span class="property">width</span>: <span class="value">80px</span>;<br>
<span class="property">height</span>: <span class="value">80px</span>;<br>
<span class="property">border-radius</span>: <span class="value">8px</span>;<br>
<span class="property">object-fit</span>: <span class="value">cover</span>;<br>
}<br><br>
<span class="selector">.media__body</span> {<br>
<span class="property">flex</span>: <span class="value">1</span>;<br>
}<br><br>
<span class="selector">.media--reverse</span> {<br>
<span class="property">flex-direction</span>: <span class="value">row-reverse</span>;<br>
}<br><br>
<span class="selector">.media--center</span> {<br>
<span class="property">align-items</span>: <span class="value">center</span>;<br>
}<br><br>
<span class="selector">.media--small .media__image</span> {<br>
<span class="property">width</span>: <span class="value">50px</span>;<br>
<span class="property">height</span>: <span class="value">50px</span>;<br>
}
</div>
</div>
<div class="demo-section">
<h4>Media Object Variants</h4>
<div class="media">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%233498db'/%3E%3C/svg%3E" alt="Demo" class="media__image">
<div class="media__body">
<h5 class="media__title">Default Media</h5>
<p class="media__content">This is the default media object layout with BEM classes.</p>
</div>
</div>
<div class="media media--reverse">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232ecc71'/%3E%3C/svg%3E" alt="Demo" class="media__image">
<div class="media__body">
<h5 class="media__title">Reversed Media</h5>
<p class="media__content">This media object is reversed using a modifier.</p>
</div>
</div>
<div class="media media--small">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e74c3c'/%3E%3C/svg%3E" alt="Demo" class="media__image">
<div class="media__body">
<h5 class="media__title">Small Media</h5>
<p class="media__content">This media object has smaller images using a modifier.</p>
</div>
</div>
</div>
</div>
<!-- Alert Components -->
<div class="feature-card">
<h3>⚠️ Alert Components</h3>
<div class="demo-section">
<div class="alert alert--success">
<strong>Success!</strong> Your action was completed successfully.
</div>
<div class="alert alert--warning">
<strong>Warning!</strong> This action requires your attention.
</div>
<div class="alert alert--error">
<strong>Error!</strong> Something went wrong. Please try again.
</div>
<div class="alert alert--info">
<strong>Info:</strong> This is an informational message.
</div>
</div>
</div>
<!-- Grid System -->
<div class="feature-card">
<h3>📱 Responsive Grid System</h3>
<div class="demo-section">
<h4>2 Column Grid</h4>
<div class="grid grid--2-col">
<div class="grid__item">Item 1</div>
<div class="grid__item">Item 2</div>
</div>
<h4>3 Column Grid</h4>
<div class="grid grid--3-col">
<div class="grid__item">Item 1</div>
<div class="grid__item">Item 2</div>
<div class="grid__item">Item 3</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="feature-card">
<h3>📄 Pagination Component</h3>
<div class="demo-section">
<div class="pagination">
<a href="#" class="pagination__item pagination__item--disabled">Previous</a>
<a href="#" class="pagination__item pagination__item--active">1</a>
<a href="#" class="pagination__item">2</a>
<a href="#" class="pagination__item">3</a>
<a href="#" class="pagination__item">Next</a>
</div>
</div>
</div>
<!-- Badges -->
<div class="feature-card">
<h3>🏷️ Badge Components</h3>
<div class="demo-section">
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--error">Error</span>
<span class="badge badge--primary badge--outline">Outline</span>
</div>
</div>
</div>
</body>
</html>BEM Best Practices
Naming Conventions
Follow consistent naming patterns and avoid common pitfalls in BEM implementation.
// Good BEM naming
.block__element--modifier
.search-form__input--large
.user-profile__avatar--rounded
Best Practices Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEM Best Practices - Scalable CSS Architecture</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.practices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.practice-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.do-dont {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.do {
background: #d4edda;
border: 2px solid #c3e6cb;
padding: 1rem;
border-radius: 5px;
}
.dont {
background: #f8d7da;
border: 2px solid #f5c6cb;
padding: 1rem;
border-radius: 5px;
}
.good-example, .bad-example {
padding: 1rem;
margin: 1rem 0;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.8rem;
}
.good-example {
background: #d1ecf1;
border-left: 4px solid #17a2b8;
}
.bad-example {
background: #f8d7da;
border-left: 4px solid #dc3545;
}
.file-structure {
background: #2c3e50;
color: white;
padding: 1.5rem;
border-radius: 8px;
margin: 1rem 0;
font-family: 'Fira Code', monospace;
}
.folder { color: #3498db; }
.file { color: #2ecc71; margin-left: 1rem; }
.naming-conventions {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 5px;
}
.workflow-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.step {
background: white;
padding: 1.5rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.step-number {
background: #3498db;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-weight: bold;
}
.team-guidelines {
background: #d4edda;
border-left: 4px solid #28a745;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
.common-pitfalls {
background: #f8d7da;
border-left: 4px solid #dc3545;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
@media (max-width: 768px) {
.practices-grid {
grid-template-columns: 1fr;
}
.do-dont {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>✅ BEM Best Practices</h1>
<p>Build scalable, maintainable CSS architecture with BEM methodology</p>
</div>
<div class="practices-grid">
<div class="practice-card">
<h3>📏 Naming Conventions</h3>
<p>Follow consistent naming patterns for blocks, elements, and modifiers:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Correct Naming</strong>
<div class="good-example">
.block<br>
.block__element<br>
.block--modifier<br>
.block__element--modifier
</div>
</div>
<div class="dont">
<strong>❌ Incorrect Naming</strong>
<div class="bad-example">
.Block<br>
.block-element<br>
.block_modifier<br>
.blockElement
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🎯 Element Independence</h3>
<p>Elements should only belong to one block:</p>
<div class="do-dont">
<div class="do">
<strong>✅ Independent Elements</strong>
<div class="good-example">
.card__title<br>
.card__body<br>
.card__footer
</div>
</div>
<div class="dont">
<strong>❌ Dependent Elements</strong>
<div class="bad-example">
.title<br>
.body<br>
.footer
</div>
</div>
</div>
</div>
<div class="practice-card">
<h3>🏗️ File Structure</h3>
<p>Organize your BEM components in a logical file structure:</p>
<div class="file-structure">
<div class="folder">styles/</div>
<div class="file">main.scss</div>
<div class="folder">components/</div>
<div class="file">_button.scss</div>
<div class="file">_card.scss</div>
<div class="file">_form.scss</div>
<div class="file">_navigation.scss</div>
<div class="folder">layouts/</div>
<div class="file">_header.scss</div>
<div class="file">_footer.scss</div>
<div class="file">_grid.scss</div>
</div>
</div>
<div class="practice-card">
<h3>⚡ Performance Considerations</h3>
<p>Optimize BEM for performance and maintainability:</p>
<div class="naming-conventions">
<strong>💡 Performance Tips:</strong>
<ul>
<li>Keep class names meaningful but concise</li>
<li>Avoid deeply nested elements in CSS</li>
<li>Use modifier classes instead of overriding styles</li>
<li>Consider CSS-in-JS for dynamic components</li>
<li>Use CSS custom properties for theming</li>
</ul>
</div>
</div>
</div>
<div class="practice-card">
<h3>🚀 BEM Workflow</h3>
<div class="workflow-steps">
<div class="step">
<div class="step-number">1</div>
<h4>Identify Blocks</h4>
<p>Find reusable components in your design</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4>Define Elements</h4>
<p>List all parts within each block</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4>Create Modifiers</h4>
<p>Define variations for blocks and elements</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h4>Write CSS</h4>
<p>Implement styles using BEM naming</p>
</div>
<div class="step">
<div class="step-number">5</div>
<h4>Test & Refine</h4>
<p>Verify component isolation and reusability</p>
</div>
</div>
</div>
<div class="team-guidelines">
<h3>👥 Team Guidelines</h3>
<p><strong>For successful BEM implementation in teams:</strong></p>
<ul>
<li>Create a shared naming convention document</li>
<li>Use linters to enforce BEM syntax</li>
<li>Establish code review practices for CSS</li>
<li>Maintain a component library or style guide</li>
<li>Document modifier usage and combinations</li>
<li>Set up consistent file organization</li>
</ul>
</div>
<div class="common-pitfalls">
<h3>⚠️ Common Pitfalls</h3>
<p><strong>Avoid these common BEM mistakes:</strong></p>
<ul>
<li><strong>Over-nesting:</strong> Creating too many element levels</li>
<li><strong>Modifier abuse:</strong> Using modifiers for everything instead of new blocks</li>
<li><strong>Inconsistent naming:</strong> Mixing different naming conventions</li>
<li><strong>Block confusion:</strong> Not clearly defining what constitutes a block</li>
<li><strong>CSS specificity issues:</strong> Combining BEM with other methodologies incorrectly</li>
<li><strong>File organization:</strong> Poor structure leading to hard-to-find styles</li>
</ul>
</div>
<div class="practice-card">
<h3>🔧 Tooling & Automation</h3>
<div class="do-dont">
<div class="do">
<strong>✅ Recommended Tools</strong>
<ul>
<li><strong>Stylelint:</strong> Enforce BEM naming conventions</li>
<li><strong>Sass:</strong> For BEM nesting and organization</li>
<li><strong>PostCSS:</strong> For CSS processing and optimization</li>
<li><strong>Storybook:</strong> For component documentation</li>
<li><strong>CSS Modules:</strong> For scoped styles</li>
</ul>
</div>
<div class="dont">
<strong>❌ Things to Avoid</strong>
<ul>
<li>Manual BEM validation</li>
<li>Inconsistent tooling across team</li>
<li>No documentation for components</li>
<li>Mixing methodologies arbitrarily</li>
<li>Ignoring performance implications</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>BEM vs Other CSS Methodologies
🏗️ BEM
Block, Element, Modifier with strict naming
📁 SMACSS
Categorizes CSS into five types
⚡ Atomic CSS
Small, single-purpose utility classes
Methodology Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEM vs Other CSS Methodologies - Comparison Guide</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.methodology-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.methodology-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.methodology-icon {
font-size: 3rem;
margin-bottom: 1rem;
text-align: center;
}
.comparison-section {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
.comparison-table th,
.comparison-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #ecf0f1;
}
.comparison-table th {
background: #3498db;
color: white;
font-weight: bold;
}
.comparison-table tr:hover {
background: #f8f9fa;
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.pros {
background: #d4edda;
padding: 1.5rem;
border-radius: 10px;
}
.cons {
background: #f8d7da;
padding: 1.5rem;
border-radius: 10px;
}
.use-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.use-case {
background: #e8f4fd;
padding: 1.5rem;
border-radius: 10px;
border-left: 4px solid #3498db;
}
.decision-guide {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
.code-examples {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.methodology-grid {
grid-template-columns: 1fr;
}
.pros-cons {
grid-template-columns: 1fr;
}
.code-examples {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚖️ BEM vs Other Methodologies</h1>
<p>Compare BEM with SMACSS, OOCSS, and Atomic CSS</p>
</div>
<div class="methodology-grid">
<div class="methodology-card">
<div class="methodology-icon">🏗️</div>
<h3>BEM</h3>
<p><strong>Block, Element, Modifier</strong></p>
<p>Component-based approach with strict naming conventions</p>
<div class="good-example" style="margin-top: 1rem;">
.block__element--modifier
</div>
</div>
<div class="methodology-card">
<div class="methodology-icon">📁</div>
<h3>SMACSS</h3>
<p><strong>Scalable and Modular Architecture</strong></p>
<p>Categorizes CSS rules into Base, Layout, Module, State, and Theme</p>
<div class="good-example" style="margin-top: 1rem;">
.l-header, .is-hidden
</div>
</div>
<div class="methodology-card">
<div class="methodology-icon">🎯</div>
<h3>OOCSS</h3>
<p><strong>Object Oriented CSS</strong></p>
<p>Separates structure from skin and container from content</p>
<div class="good-example" style="margin-top: 1rem;">
.media, .media-img
</div>
</div>
<div class="methodology-card">
<div class="methodology-icon">⚡</div>
<h3>Atomic CSS</h3>
<p><strong>Functional CSS</strong></p>
<p>Small, single-purpose classes that do one thing well</p>
<div class="good-example" style="margin-top: 1rem;">
.mt-1, .text-center
</div>
</div>
</div>
<div class="comparison-section">
<h2>📊 Methodology Comparison</h2>
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th>BEM</th>
<th>SMACSS</th>
<th>OOCSS</th>
<th>Atomic CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Learning Curve</strong></td>
<td>Moderate</td>
<td>Moderate</td>
<td>Easy</td>
<td>Easy</td>
</tr>
<tr>
<td><strong>Team Adoption</strong></td>
<td>Easy with guidelines</td>
<td>Moderate</td>
<td>Easy</td>
<td>Challenging</td>
</tr>
<tr>
<td><strong>Scalability</strong></td>
<td>Excellent</td>
<td>Excellent</td>
<td>Good</td>
<td>Good</td>
</tr>
<tr>
<td><strong>HTML Size</strong></td>
<td>Moderate</td>
<td>Moderate</td>
<td>Moderate</td>
<td>Large</td>
</tr>
<tr>
<td><strong>CSS Size</strong></td>
<td>Moderate</td>
<td>Moderate</td>
<td>Small</td>
<td>Large</td>
</tr>
<tr>
<td><strong>Reusability</strong></td>
<td>Excellent</td>
<td>Good</td>
<td>Excellent</td>
<td>Excellent</td>
</tr>
<tr>
<td><strong>Maintainability</strong></td>
<td>Excellent</td>
<td>Good</td>
<td>Good</td>
<td>Moderate</td>
</tr>
</tbody>
</table>
</div>
<div class="comparison-section">
<h2>🎯 BEM: Pros and Cons</h2>
<div class="pros-cons">
<div class="pros">
<h3>✅ Advantages</h3>
<ul>
<li><strong>Clear Structure:</strong> Easy to understand component relationships</li>
<li><strong>Self-Documenting:</strong> Class names describe purpose</li>
<li><strong>Low Specificity:</strong> Avoids specificity wars</li>
<li><strong>Team Friendly:</strong> Consistent across developers</li>
<li><strong>Modular:</strong> Components are independent and reusable</li>
<li><strong>Scalable:</strong> Works well in large projects</li>
</ul>
</div>
<div class="cons">
<h3>❌ Disadvantages</h3>
<ul>
<li><strong>Verbose Class Names:</strong> Can become long and repetitive</li>
<li><strong>Learning Curve:</strong> Team needs to learn methodology</li>
<li><strong>HTML Bloat:</strong> Multiple classes can clutter HTML</li>
<li><strong>Rigid Structure:</strong> Less flexible than some approaches</li>
<li><strong>Tooling Dependency:</strong> Best with Sass/preprocessors</li>
</ul>
</div>
</div>
</div>
<div class="comparison-section">
<h2>🔍 Code Comparison</h2>
<div class="code-examples">
<div class="code-example">
<strong>BEM Approach</strong><br><br>
<div class="card card--featured"><br>
<div class="card__header"><br>
<h3 class="card__title">Title</h3><br>
</div><br>
<div class="card__body"><br>
<p class="card__text">Content</p><br>
</div><br>
</div>
</div>
<div class="code-example">
<strong>Atomic CSS Approach</strong><br><br>
<div class="bg-white rounded shadow p-4 border-2 border-red"><br>
<div class="bg-blue text-white p-4"><br>
<h3 class="text-xl m-0">Title</h3><br>
</div><br>
<div class="p-4"><br>
<p class="text-gray mb-0">Content</p><br>
</div><br>
</div>
</div>
</div>
</div>
<div class="comparison-section">
<h2>🎯 When to Use Each Methodology</h2>
<div class="use-case-grid">
<div class="use-case">
<h4>✅ Use BEM For:</h4>
<ul>
<li>Large, complex applications</li>
<li>Team-based development</li>
<li>Component-based architecture</li>
<li>Projects requiring high maintainability</li>
<li>When clarity is more important than brevity</li>
</ul>
</div>
<div class="use-case">
<h4>✅ Use SMACSS For:</h4>
<ul>
<li>Structured but flexible projects</li>
<li>When you need categorization</li>
<li>Projects with multiple layout types</li>
<li>When BEM feels too restrictive</li>
</ul>
</div>
<div class="use-case">
<h4>✅ Use OOCSS For:</h4>
<ul>
<li>Highly reusable components</li>
<li>Performance-critical applications</li>
<li>When CSS file size matters</li>
<li>Projects with many similar components</li>
</ul>
</div>
<div class="use-case">
<h4>✅ Use Atomic CSS For:</h4>
<ul>
<li>Rapid prototyping</li>
<li>Small to medium projects</li>
<li>When HTML size isn't a concern</li>
<li>Utility-first frameworks (Tailwind)</li>
</ul>
</div>
</div>
</div>
<div class="decision-guide">
<h3>🎯 Decision Guide</h3>
<p><strong>Choose BEM when:</strong> You're working on large-scale applications with multiple developers,
need clear component boundaries, want self-documenting code, and prioritize maintainability over brevity.</p>
<p><strong>Consider alternatives when:</strong> You're building prototypes, working alone on small projects,
need maximum performance, or prefer utility-based approaches.</p>
<p><strong>Hybrid Approach:</strong> Many teams successfully combine BEM with concepts from other methodologies,
like using BEM for components and Atomic CSS for utilities and layouts.</p>
</div>
<div class="comparison-section">
<h2>🚀 Modern Trends</h2>
<p><strong>Current industry trends in CSS methodology:</strong></p>
<div class="pros-cons">
<div class="pros">
<h4>Popular Approaches</h4>
<ul>
<li><strong>BEM + Sass:</strong> Most common in enterprise</li>
<li><strong>CSS-in-JS:</strong> Growing in React ecosystems</li>
<li><strong>Utility-First:</strong> Tailwind CSS popularity</li>
<li><strong>Component Libraries:</strong> Design system focus</li>
<li><strong>CSS Modules:</strong> Scoped styles solution</li>
</ul>
</div>
<div class="cons">
<h4>Considerations</h4>
<ul>
<li>Team skill level and preferences</li>
<li>Project scale and longevity</li>
<li>Performance requirements</li>
<li>Tooling and build process</li>
<li>Maintenance and documentation needs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>Practical Applications
🏗️ Component Architecture
- Button components with variants
- Card components with modifiers
- Navigation menus with states
- Form controls with validation
- Modal and overlay components
🔧 Real-World Patterns
- Define clear block boundaries
- Use modifiers for state changes
- Keep elements dependent on their block
- Document modifier usage
- Establish team naming conventions
💡 Pro Tips for Effective BEM
Structure:
- Keep blocks truly independent
- Avoid nesting blocks within blocks
- Use meaningful block names
- Document component interfaces
Maintenance:
- Establish style guides
- Use linters to enforce conventions
- Regularly refactor and consolidate
- Document modifier combinations
Ready to Master BEM? 🏗️
Start using BEM methodology to create scalable, maintainable CSS architecture. Whether you're building simple components or complex design systems, BEM will transform how you organize and think about your styles.