如何根据 BEM 命名概念格式化 html？答案

【问题标题】：How to format html according to BEM naming concept?如何根据 BEM 命名概念格式化 html？
【发布时间】：2016-11-07 06:25:32
【问题描述】：

我有一个愚蠢的代码，这是我将 BEM 命名应用于项目的方法。但我猜有些地方不对劲，因为 BEM 声明元素的元素不应该存在。那我该如何命名呢？

<div class="container">
<div class="profile">
  <p class="profile__message></p>
  <div class="profile__item">
    <div class="profile__item__el profile__item__el-image">
      <a class="thumb"><img></a>
      <div class="profile__item__el-remove"></div>
    </div>
    <span class="profile__item__el profile__item__el-name"></span>
    <span class="profile__item__el profile__item__el-author"></span>
    <span class="profile__item__el profile__item__el-date"></span>
    <div class="profile__item__el-favorite"></div>
  </div>
</div>
</div>

我明白了，我不应该使用单独的类“profile__item__el”，因为并非所有元素都属于同一类型，但所有元素都是项目元素，我认为从它们的类名中应该很明显，但似乎就像根据 BEM 一样，它是不正确的。

【问题讨论】：

标签： html css naming-conventions bem

【解决方案1】：

简短回答。

里面的每个块只有 element 或另一个 block

所以每个元素都有一个像 block-name__elem-name 这样的类 - 没有额外的类。

每个块 - 设置命名空间。

要在 BEM 中更改查找块元素，请使用修饰符。

工作原理：html + css - 见下文

BEM 也是具有自己的模板引擎的技术堆栈。所以你不需要编写纯 html - 它会自动编译。

看起来如何（bemjson）：

{
  block : 'row',
    content : [
      {
          elem : 'col',
          mods : { sw : 4, mw : 2, lw : 2, xlw : 2 },
          content : [
              {
                  block : 'footer', // it's determine parent of element
                  elem : 'age',    // but it's element
                  content : [
                      {
                          block : 'icon',
                          mods : { type : 'some-icon' }
                      }
                  ]
              },
          ]
      },
  ]
}

你可以在 bundle(html) 中看到输出 html：

<div class="row"> // block-namespace
  <div class="row__col row__col_sw_4 row__col_mw_2 row__col_lw_2 row__col_xlw_2"> //elem row__col, then modifiers
    <div class="footer__age"> // element age with forced block footer
      <i class="icon icon_type_some-icon">
        <svg></svg>
      </i>
    </div>
</div>

css 看起来像这样（元素基本上在 2 lvl）：

.row // namespace
{
    margin: 0 -7px;

    &__col // element
    {
        padding: 0 7px;
    }
    &__col_p_0 // element with modifier
    {
      padding: 0px;
    }
}

官网文档： https://en.bem.info/methodology/naming-convention/

【讨论】：

【解决方案2】：

我想我可能会朝这个方向走得更远，但即使这样也不是很完美：

<div class="container">
    <div class="profile">
      <p class="profile__message></p>
      <div class="profile__item">
        <div class="profile__attribute profile__image">
          <a class="thumb"><img></a>
          <div class="action--remove"></div>
        </div>
        <span class="profile__attribute profile__name"></span>
        <span class="profile__attribute profile__author"></span>
        <span class="profile__attribute profile__date"></span>
        <div class="action--favorite"></div>
      </div>
    </div>
</div>

“profile__attribute”类的必要性值得怀疑。只有当您打算将样式应用于所有这些不同的属性时，您才真正需要它。

我认为您误解了 BEM 的“修饰符”部分的目的。首先，你只使用了一个连字符，但它应该是两个，其次，修饰符更多地用于同一事物的不同变体，比如如果你有一个按钮元素和一个大小变体，那么你可以有按钮--大和按钮--小。我会说姓名、作者和日期都是独立的元素，而不是同一元素的不同版本。

总而言之，我不确定 BEM 是否有明确的对错，很大程度上取决于人和你可能拥有什么样的编码风格指南。

【讨论】：