CSS 中的 BEM 方法：快速入门指南

这是学习BEM（组件驱动的 CSS 方法）的快速入门指南。

如果您想开始练习并将 BEM 应用到您的项目中，本指南将帮助您入门。

奖励： 下载免费的备忘单，它将向您展示如何快速开始使用 BEM。

准备好了吗？让我们开始吧：

BEM 概述
B - 块
E-元素
M - 修饰符

BEM 概述

BEM（Block-Element-Modifier）是由Yandex团队开发的 CSS 命名约定，旨在提高 Web 开发的可扩展性和可维护性。

简而言之，BEM 的理念是通过以下方法命名 CSS 类来“将用户界面划分为独立的块”：

/* Block component */
.card {}

/* Elements are dependent on their parent block */ 
.card__img {}

/* Modifiers are for incremental style changes */
.card--dark {} 
.card__img--large {}

块：可重复使用的独立组件（例如带有类名.nav）
元素：块内的子项，不能与该块分开使用（例如，具有类名.nav__item）
修饰符：块或修饰符样式的变体（例如，带有类名.nav--dark）

让我们深入研究一些真实的 CSS 示例来掌握这一点。

区块

块是可重复使用的组件。例如按钮、卡片或表单字段。

命名块时，重点描述其用途（即它是什么）而不是其状态（即它是什么样子）。

例如，.btn或.nav遵循块的正确命名约定。

.big或者.bright-pink描述它的外观，因此当您以后想要更改设计时，其扩展性不佳。

<!-- INCORRECT -->

<div class="large-red-box">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .large-red-box {}
</style>

<!-- CORRECT -->

<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
</style>

如果您想知道如何在块内放置块（例如，导航内的按钮），这里有一篇简短的文章可以帮助您。

元素

块内是元素所在的位置。元素依赖于其父块，因此脱离父块就无法使用。

元素还具有独特的 CSS 类命名约定，其工作方式如下：

.block__element

例如，使用.card组件，卡片组件内的元素（如图像）将具有类似的类名.card__img。

元素名称始终附加在块名称之后，以双下划线分隔__。

<!-- INCORRECT -->

<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card img {}
 .card h2 {}
 .card p {}
 .card a {}
</style>

<!-- CORRECT -->

<div class="card">
 <img class="card__img" src="...">
 <h2 class="card__title" >...</h2>
 <p class="card__description" >...</p>
 <a class="card__button">...</a>
</div>

<style>
 .card {}
 .card__img {}
 .card__title {}
 .card__description {}
</style>

值得注意的是，第二段代码片段避免使用多个选择器来定位样式（例如 like .card img {}）。

使用 BEM 元素类并直接使用它被认为是最佳实践（如.card__img {}）。

遵循这种方法可以减少后续出现级联问题的可能性。

修饰符

当块（或元素）中存在不同的样式时，修饰符就派上用场了。

例如，你的“卡片”区块可能有明暗版本。或者，你可能有主要按钮和次要按钮。

修饰符具有独特的 CSS 命名约定，其工作原理如下：

block--modifier或者block__element--modifier。

没错，BEM 修饰符可以应用于块和元素。

让我们深入探讨一些好的做法和坏的做法：

<!-- INCORRECT -->

<div class="card--dark">
 <img src="...">
 <h2 class="card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card--dark {}
 .card__title--large {}
</style>

单独使用修饰符类（即没有块或元素类）被认为是不好的做法。

这是因为修饰符旨在向块添加增量样式更改。

因此，无论何时使用修饰符，都要确保它与基类一起使用：

<!-- CORRECT -->

<div class="card card--dark">
 <img src="...">
 <h2 class="card__title card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card--dark {}
 .card__title {}
 .card__title--large {}
</style>

就是这样！

这些是让您开始使用 BEM 的基础知识。

如果您有兴趣了解有关 BEM 背后的‘原因’的更多信息，我建议您查看这篇 CSS Tricks 文章。

学习任何新东西，实践至关重要。不妨在下一个项目中尝试一下 BEM，看看它能带给你怎样的体验！

下载免费的 BEM 备忘单

想要开始练习 BEM 并寻找一本实用的、快速入门的行动指南吗？

下载涵盖 BEM 基础知识的免费备忘单，以便您立即开始练习。

文章来源：https://dev.to/bytomray/bem-methodology-in-css-a-quick-start-guide-2bd1