这是为嵌套元素编写 BEM 的正确方法吗？答案

【问题标题】：Is this the correct way to write BEM for nested elements?这是为嵌套元素编写 BEM 的正确方法吗？
【发布时间】：2021-01-05 02:06:42
【问题描述】：

所以我一直在用我认为正确的BEM 编写我的类名。像这样的：

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

看看我是如何拥有文本框的，然后我给出了 2 个破折号？我最近看到这是无效的 BEM，现在我需要知道我应该如何命名嵌套的东西。例如，我应该如何命名<p> 标签？

【问题讨论】：

Here is the FAQ

标签： html css reactjs bem

【解决方案1】：

BEM的重点是区分元素（类名中以__为前缀）和修饰符（以--为前缀）：

元素
没有独立意义的块的一部分，并且是在语义上与其块相关联。

修饰符
块或元素上的标志。使用它们来改变外观或行为。

在您的示例中，--heading、--subheading 和 --author 都不是元素的修饰符 - 它们是元素。如果出于某种原因，您决定对这些元素应用实际的修饰符（例如 highlighted 或 clickable），您最终要么完全重写类名 - 要么像 article__textbox--heading--clickable 这样有一些怪异。

现在，我在这里看到的真正问题是“好吧，这不是修饰符，但是我应该如何处理位于其他元素中的元素？”换句话说，哪些类名应该应用于嵌套在其他元素中的元素？这个问题其实是在BEM FAQ回答的：

问：如果我的块具有复杂的结构及其元素，我该怎么办是嵌套的？ CSS 类，如 block__elem1__elem2__elem3 看起来很吓人。

A：根据BEM方法，块结构应该是扁平化的；你做不需要反映块的嵌套DOM结构。所以，班级这种情况的名称是：

.block {}
.block__elem1 {}  
.block__elem2 {}  
.block__elem3 {}

...而块的 DOM 表示可能是嵌套的：

  <div class='block'>
     <div class='block__elem1'>
         <div class='block__elem2'>
             <div class='block__elem3'></div>
         </div>
     </div>
  </div>

除了类看起来更好之外，它使元素只依赖于块。因此，在对界面进行更改时，您可以轻松地将它们移动到整个块中。块 DOM 结构的变化不需要对 CSS 代码进行相应的更改。

因此，在您的情况下，将它们设置为这样的样式可能会更好：

<div className="article">
  <div className="article__textbox">
    <h1 className="article__heading"></h1>
    <p className="article__subheading"></p>
    <span className="article__author"></span>
  </div>
</div>

this article 中介绍的另一种方法是将文本框视为一个单独的块，并将其所有内容视为自己的元素：

<div className="article">
  <div className="textbox">
    <h1 className="textbox__heading"></h1>
    <p className="textbox__subheading"></p>
    <span className="textbox__author"></span>
  </div>
</div>

请记住，这完全是关于 DRY：如果该文本框打算在其他块中重用，请将其视为块。引用同一篇文章：

当你不确定某件事是否是一个障碍时，问问自己：“可以我将要添加到块中的这个 BEM 元素将用作网站的其他区域？”

【讨论】：

【解决方案2】：

根据您的标记结构，不应有修饰符。

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

h1.article__textbox--heading、p.article__textbox--subheading、span.article__textbox--author 是div.article__textbox 的子元素，它们应该被视为像这样的元素而不是修饰符。

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox__heading"></h1>
        <p className="article__textbox__subheading"></p>
        <span className="article__textbox__author"></span>
    </div>
</div>

Modifier 以 -- 为前缀，当你想拥有结构上完全相似的元素但你想改变风格时使用 color， font-size等

.article {
  width: 320px;
  background-color: #e2e8f0;
  padding: 8px;
  border-radius: 3px 3px 3px 3px;
  margin-bottom: 8px;
}

.article__textbox__heading {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 1.2px;
  color: #2c5282;
}

.article__textbox__subheading {
  font-size: 0.75rem;
  color: #718096;
  
}

.article__textbox__author {
   font-size: 0.875rem;
   
}

.article__textbox__author--premium {
   color: blue;
   font-weight: 700;
}

<div class="article">
    <div class="article__textbox">
        <h1 class="article__textbox__heading">Learning BEM </h1>
        <p class="article__textbox__subheading">The Block, Element, Modifier methodology</p>
        <span class="article__textbox__author">John Doe</span>
    </div>
</div>

<div class="article">
    <div class="article__textbox">
        <h1 class="article__textbox__heading">Mastering CSS BEM Principle </h1>
        <p class="article__textbox__subheading">The Block, Element, Modifier methodology</p>
        <span class="article__textbox__author article__textbox__author--premium">Jeanne Doe</span>
    </div>
</div>

了解更多here

【讨论】：