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

Question

我有fooliwng代碼，這是將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這是不正確的。

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級）：

.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的“修飾符”部分的目的。 首先，您只使用了一個連字符，但應該使用兩個連字符，其次，修飾符用於同一事物的不同變體，例如，如果您有一個button元素以及一個大大小小的變體，那么您可以使用button -大和按鈕-小。 我想說名稱，作者和日期都是單獨的元素，而不是同一元素的不同版本。

綜上所述，我不確定BEM是否有確定的對與錯，這在很大程度上取決於個人以及您可能擁有的編碼風格指南。