Question

我有愚蠢的代码，这是我将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>

我明白了，我不应该使用一个单独的课程＆quot; profile__item__el＆＃39; becuz并非所有元素都属于同一类型，但所有元素都是item-elements，我认为它们应该从类名中显而易见，但似乎根据BEM它是不正确的。

Answer 1

简短回答。

内部的每个区块只有元素或其他区块

所以每个元素都有一个类 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/

Answer 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是否存在明确的对错，其中很大程度上取决于人和您可能拥有的编码风格指南。

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

2 个答案: