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

Question

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

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

h3里面有两个span，我希望它们有不同的风格。

那我就把它们命名为它们属于它们 parent:

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__itemCSSclass负责定位child块product在parent块linup.一个块不应该自己定位（它不会被重复使用）。

那么，你的元素product__title有两个childrenen和non-en。使用 BEM，一个元素不能是其他元素的 parent。但是它可以嵌套兄弟元素。你可以这样做：

<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块的child个元素。是光解。

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

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

这里的CSSclassproduct__title负责定位child块dual-title在parent块product.

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

BEM naming convention for nested tiny parts

css

bem