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

编程问答 2022-06-13

问题描述

所以我一直按照我认为正确的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>标签应该命名什么？

解决方法

BEM的关键点是元素（在类名中以__前缀）和修饰符（以--前缀）之间的区别：

元素
没有独立含义的块的一部分 在语义上与其块相关。

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

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

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

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

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元素用作 网站的其他区域？”

,

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

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

修饰符，以 -- 为前缀，当您想要具有结构上完全相似但要更改{{ 1}}，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;
}

了解更多here

bemhtmlreactjsreactjsreactjsreactjs