CSS BEM Model – A Guide to Writing Scalable and Maintainable CSS

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: .menu is the main block representing the navigation menu.
• Element: .menu__list and .menu__item are elements within the block.
• Modifier: .menu__item--active is 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__icon is an element within the .button block, representing an icon in the button.
• .button__label is 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--primary is a modifier that changes the button's background color.
• .button--large is 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:

• .card is the block that represents the entire card component.
• .card__header, .card__title, .card__body, and .card__footer are elements within the card block.
• .card__button--primary is 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

Ridoy Hasan