CSS 为什么BEM常常使用两个下划线而不是一个来表示修饰符

在本文中，我们将介绍为什么BEM（Block-Element-Modifier）经常使用两个下划线而不是一个来表示修饰符。

阅读更多：CSS 教程

什么是BEM？

首先，我们需要了解一下BEM。BEM是一种命名约定，用于创建可维护和可扩展的CSS样式。它将CSS类分为块（Block）、元素（Element）和修饰符（Modifier）三个部分，以此来构建复杂的页面结构。

• 块（Block）：代表独立的、可复用的组件，具有明确的含义。例如，一个按钮可以是一个块。
• 元素（Element）：代表块的一部分，不能单独使用。例如，按钮上的文本可以是一个元素。
• 修饰符（Modifier）：代表块或元素的不同状态或变化。例如，按钮可以有不同的颜色、大小或形状。

为什么BEM使用两个下划线？

根据BEM的命名约定，我们知道修饰符的命名应该使用两个下划线作为前缀。那么为什么BEM选择使用两个下划线而不是一个呢？

避免与元素冲突

一个可能的原因是为了避免与元素的命名冲突。元素的命名约定是使用一个下划线作为前缀，例如.block_element，而修饰符使用两个下划线作为前缀，例如.block_element__modifier。如果修饰符也使用一个下划线作为前缀，例如.block_element_modifier，那么就无法在命名上区分元素和修饰符。使用两个下划线作为前缀可以清晰地表示修饰符的含义，避免了命名冲突。

便于区分块和修饰符

另一个原因是为了区分块和修饰符的样式。使用两个下划线作为前缀可以让我们在CSS中更容易找到修饰符的样式。例如，如果我们有一个按钮块.button，它可以有不同的尺寸修饰符，如.button__size_small和.button__size_large。这样，在CSS文件中搜索__size可以迅速找到所有与尺寸相关的修饰符。

示例说明

下面是一个示例，展示了BEM命名约定使用两个下划线表示修饰符的方式：

<div class="button button_color_red"></div>
<div class="button button__size_small"></div>
<div class="button__text button__text_bold"></div>

在上面的例子中，.button_color_red是一个按钮块的颜色修饰符，.button__size_small是按钮块的尺寸修饰符，.button__text_bold是按钮块内文本元素的加粗修饰符。使用两个下划线作为修饰符的前缀可以很容易地区分它们。

总结

BEM使用两个下划线而不是一个来表示修饰符有几个原因。首先，它避免了与元素的命名冲突，使命名更加清晰。其次，它将块和修饰符的样式区分开来，使CSS文件更易读和维护。通过使用BEM的命名约定，我们可以创建更具可维护性和可扩展性的CSS代码。

所以，当你在使用BEM命名约定时，请记得使用两个下划线来表示修饰符。希望本文对你理解为什么BEM常常使用两个下划线而不是一个有所帮助！