嵌套小零件的 BEM 命名约定

Posted 2023-02-23

【中文标题】嵌套小零件的 BEM 命名约定

【英文标题】：BEM naming convention for nested tiny parts

【发布时间】：2019-08-12 23:51:28

【问题描述】：

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

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

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

那么我应该像他们属于他们的父母一样命名他们吗：

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 规则？

【参考方案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中。

【讨论】：

所以我需要看到更多Blocks，而不是为Elements而烦恼。我想我现在对 BEM 的理解非常好 :)