This content originally appeared on DEV Community and was authored by Ridoy Hasan
CSS BEM Model – A Guide to Writing Scalable and Maintainable CSS
In this article, we’ll dive into the BEM (Block, Element, Modifier) methodology, a popular CSS naming convention that helps you write clean, structured, and maintainable CSS for large projects. BEM ensures that your code remains scalable as the project grows and reduces the chances of style conflicts.
1. What is BEM?
BEM stands for:
- Block: A standalone entity that is meaningful on its own, such as a button, menu, or form.
- Element: A part of the block that performs a specific function, like a button label or a menu item.
- Modifier: A variation or state of a block or element, like a disabled button or a highlighted menu item.
The BEM methodology emphasizes creating reusable, predictable, and maintainable CSS code.
BEM Naming Convention:
.block {}
.block__element {}
.block--modifier {}
- Block: Represents the main container.
-
Element: Follows the block name, separated by a double underscore (
__). -
Modifier: Follows the block or element name, separated by a double hyphen (
--).
2. Defining the Structure
Let’s break down the structure of BEM with an example.
Example:
<div class="menu">
<ul class="menu__list">
<li class="menu__item menu__item--active">Home</li>
<li class="menu__item">About</li>
<li class="menu__item">Contact</li>
</ul>
</div>
In this example:
-
Block:
.menuis the main block representing the navigation menu. -
Element:
.menu__listand.menu__itemare elements within the block. -
Modifier:
.menu__item--activeis a modifier indicating the active state of the menu item.
3. Blocks in BEM
A block is an independent, reusable component. Think of it as a self-contained entity that can be placed anywhere in your code without worrying about its style being affected by other elements.
Example:
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
}
Here, .button is a block that defines the styles for a button component. You can reuse this block across multiple parts of your website.
4. Elements in BEM
An element is a part of a block that has no standalone meaning. It’s tied to the block and exists to perform a function related to the block.
Example:
.button__icon {
margin-right: 10px;
}
.button__label {
font-size: 14px;
}
Here:
-
.button__iconis an element within the.buttonblock, representing an icon in the button. -
.button__labelis another element, representing the text label of the button.
5. Modifiers in BEM
A modifier represents a variation of a block or element. Modifiers are used to change the appearance or behavior of a component, such as changing the color of a button or making an element larger.
Example:
.button--primary {
background-color: #2ecc71;
}
.button--large {
padding: 15px 30px;
}
Here:
-
.button--primaryis a modifier that changes the button's background color. -
.button--largeis another modifier that increases the button's size.
Modifiers can also be applied to elements:
.button__icon--small {
width: 10px;
height: 10px;
}
6. Benefits of Using BEM
- Scalability: BEM is designed to be scalable, making it ideal for larger projects with many components.
- Reusability: Blocks are self-contained and can be reused across different parts of a project.
- Maintainability: BEM encourages clear, consistent naming, making it easier to maintain CSS as the project grows.
- Predictability: You can easily tell which elements belong to which blocks and understand their variations based on the modifier.
7. BEM in Action
Let’s look at a more complete example that includes blocks, elements, and modifiers:
HTML:
<div class="card">
<div class="card__header">
<h2 class="card__title">Card Title</h2>
</div>
<div class="card__body">
<p class="card__text">This is a simple card component.</p>
</div>
<div class="card__footer">
<button class="button card__button card__button--primary">Read More</button>
</div>
</div>
CSS:
/* Block */
.card {
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
}
/* Elements */
.card__header {
margin-bottom: 15px;
}
.card__title {
font-size: 18px;
color: #333;
}
.card__body {
margin-bottom: 15px;
}
.card__text {
color: #666;
}
.card__footer {
text-align: right;
}
/* Modifier */
.card__button--primary {
background-color: #3498db;
color: white;
}
In this example:
-
.cardis the block that represents the entire card component. -
.card__header,.card__title,.card__body, and.card__footerare elements within the card block. -
.card__button--primaryis a modifier that applies a primary style to the button within the card.
8. Common Mistakes to Avoid in BEM
- Too many nested elements: Avoid deeply nested elements, as it can lead to unnecessarily long class names.
- Unnecessary modifiers: Only use modifiers when you need to change the appearance or state of a block or element.
- Combining BEM with other naming conventions: Stick to BEM throughout your project for consistency.
Conclusion
The BEM methodology is a powerful way to keep your CSS organized, predictable, and scalable. By breaking down your components into blocks, elements, and modifiers, you can maintain cleaner code and avoid style conflicts, making development faster and more efficient as your project grows.
Follow me on LinkedIn
This content originally appeared on DEV Community and was authored by Ridoy Hasan
Ridoy Hasan | Sciencx (2024-09-27T18:52:50+00:00) CSS BEM Model – A Guide to Writing Scalable and Maintainable CSS. Retrieved from https://www.scien.cx/2024/09/27/css-bem-model-a-guide-to-writing-scalable-and-maintainable-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.