嵌套微小零件的BEM命名约定

Question

刚开始使用BEM命名方法进行编码。我想知道如何命名嵌套的微小部分。

我在下面附加了示例布局，请看一下。

span中有两个h3，我希望它们具有不同的样式。

那我就给他们起个名字，就像他们属于他们的父母一样

class="en product-lineup__title-en"
class="non-en product-lineup__title-non-en"

或者就像它们属于其标题一样（但看起来像是BEEM ...）：

class="en product-lineup__title__en"
class="non-en product-lineup__title__non-en"

或者只是将其留空然后在CSS中

.product-lineup__title span:first-child
.product-lineup__title span:nth-child(2)

哪种方法最好？或者我一开始会误解BEM规则？

Answer 1

BEM是一种有关可重用块的方法。如果看到在UI中重复出现的视觉模式，则应考虑将其视为一个块而不是一个元素。元素是块的详细信息。

对于线框，我建议使用两个块：lineup块负责全局布局：

<ul class="lineup">
  <li class="lineup__item"></li>
  <li class="lineup__item"></li>
  …
</ul>

在每个<li>中，都有一个product块的实例：

<article class="product">
  <img class="product__img">
  <h3 class="product__title">…</h3>
  <div class="product__text">…</div>
</article>

如果您想保留当前的HTML结构，则可以在<li>标记上混合使用

<ul class="lineup">
  <li class="lineup__item product">
    <img class="product__img">
    <h3 class="product__title">…</h3>
    <div class="product__text">…</div>
  </li>
  …
</ul>

这里lineup__item CSS类负责将子块product放置在父块linup中。块本身不应该定位（它不可重用）。

然后，您的元素product__title有两个孩子en和non-en。使用BEM，一个元素不能是其他元素的父元素。但是它可以嵌套兄弟元素。您可以这样做：

<h3 class="product__title">
  <span class="product__title-en"></span>
  <span class="product__title-non-en"></span>
</h3>

在BEM树中，title，title-en，title-non-en是product块的所有子元素。这是轻巧的解决方案。

但是也许您会意识到，这种双重标题是在product块之外使用的可视模式，或者也许只是为了清楚起见，您可以决定为此制作一个dual-title块。

<h3 class="product__title dual-title">
  <span class="dual-title__en"></span>
  <span class="dual-title__non-en"></span>
</h3>

这里，CSS类product__title负责将子块dual-title放置在父块product中。