当前位置：首页 > 文章列表 > 文章 > 前端 > CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南

CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南

来源：dev.to 2024-10-03 22:21:58 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

css bem 模型 – 编写可扩展和可维护的 css 指南

在本文中，我们将深入探讨 bem（块、元素、修饰符） 方法，这是一种流行的 css 命名约定，可帮助您为大型项目编写干净、结构化且可维护的 css。 bem 确保您的代码随着项目的增长保持可扩展性，并减少风格冲突的可能性。

1.什么是边界元法？

bem 代表：

块：本身有意义的独立实体，例如按钮、菜单或表单。
元素：执行特定功能的块的一部分，例如按钮标签或菜单项。
修饰符：块或元素的变体或状态，例如禁用的按钮或突出显示的菜单项。

bem 方法强调创建可重用、可预测和可维护的 css 代码。

bem 命名约定：

.block {}
.block__element {}
.block--modifier {}

block：代表主容器。
元素：跟在块名称之后，用双下划线（__）分隔。
修饰符：跟在块或元素名称之后，用双连字符 (--) 分隔。

2.定义结构

让我们用一个例子来分解bem的结构。

示例：

<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>

在此示例中：

块：.menu 是代表导航菜单的主块。
元素：.menu__list 和 .menu__item 是块内的元素。
修饰符：.menu__item--active 是修饰符，指示菜单项的活动状态。

3. bem 中的块

块是一个独立的、可重用的组件。将其视为一个独立的实体，可以放置在代码中的任何位置，而不必担心其样式受到其他元素的影响。

示例：

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

这里，.button 是一个定义按钮组件样式的块。您可以在网站的多个部分重复使用此块。

4. bem 中的元素

元素是块的一部分，没有独立的含义。它与区块绑定并存在以执行与区块相关的功能。

示例：

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

这里：

.button__icon 是 .button 块中的一个元素，代表按钮中的图标。
.button__label 是另一个元素，代表按钮的文本标签。

5. bem 中的修饰符

修饰符 表示块或元素的变体。修饰符用于更改组件的外观或行为，例如更改按钮的颜色或使元素更大。

示例：

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

这里：

.button--primary 是一个修改按钮背景颜色的修饰符。
.button--large 是另一个增加按钮大小的修饰符。

修饰符也可以应用于元素：

.button__icon--small {
    width: 10px;
    height: 10px;
}

6.使用 bem 的好处

可扩展性：bem 被设计为可扩展的，使其成为具有许多组件的大型项目的理想选择。
可重用性：块是独立的，可以在项目的不同部分重用。
可维护性：bem 鼓励清晰、一致的命名，使得随着项目的发展更容易维护 css。
可预测性：您可以轻松辨别哪些元素属于哪些块，并根据修饰符了解它们的变化。

7. bem 的实际应用

让我们看一个更完整的示例，其中包括块、元素和修饰符：

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;
}

在此示例中：