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 是代表整个卡片组件的块。
• .card__header、.card__title、.card__body 和 .card__footer 是卡片块中的元素。
• .card__button--primary 是将主要样式应用于卡片内按钮的修饰符。

8. BEM 中要避免的常见错误

• 嵌套元素过多：避免深层嵌套元素，因为它可能导致不必要的长类名。
• 不必要的修饰符：仅当需要更改块或元素的外观或状态时才使用修饰符。
• 将 BEM 与其他命名约定相结合：在整个项目中坚持使用 BEM 以保持一致性。

结论

BEM 方法是保持 CSS 有序、可预测和可扩展的强大方法。通过将组件分解为块、元素和修饰符，您可以维护更清晰的代码并避免样式冲突，从而使您的项目开发更快、更高效成长。

---

在 LinkedIn 上关注我

里多伊·哈桑

The above is the detailed content of CSS BEM Model – A Guide to Writing Scalable and Maintainable CSS. For more information, please follow other related articles on the PHP Chinese website!