BEM舉例

via BEM by Example 侵刪

帶單個修飾符的組件

一個組件可能有不一樣狀態。狀態應該使用修飾符類來實現。

<!-- 這樣寫 -->
<button class="btn btn--secondary"></button>

<style lang="scss">
  .btn {
    display: inline-block;
    color: blue;
    &--secondary {
      color: green;
    }  
  }
</style>

不要單獨使用修飾符。修飾符的做用是增長而不是替換基類。

<!-- 別 -->
<button class="btn--secondary"></button>

<style lang="scss">
  .btn--secondary {
    display: inline-block;
    color: green;
  }  
</style>

帶子元素的組件

更復雜的組件含有子元素。
原則上不要使用標籤選擇器，你不知道 <li>裏面是否還會出現嵌套的 <ul><li>

<!-- 這樣寫 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo { /* css權重 of 10 */
    &__img { } /* css權重 of 10 */
    &__caption { } /* css權重 of 10 */
  }
</style>

<!-- 別 -->
<figure class="photo">
  <img src="me.jpg">
  <figcaption>Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo { /* css權重 of 10 */
    img { } /* css權重 of 11 */
    figcaption { } /* css權重 of 11 */
  }
</style>

若是您的組件的子元素有幾個層次，請不要嘗試在類名稱中表示每一個層次。
BEM並不是旨在傳達結構深度。
表示組件中子元素的BEM類名稱應僅包括基本/塊名稱和一個元素名稱。
在下面的示例中，請注意 photo__caption__quote是BEM的不正確用法，而 photo__quote更合適。

<!-- 這樣寫 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__quote">
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style lang="scss">
  .photo {
    &__img { }
    &__caption { }
    &__quote { }
  }
</style>


<!-- 別 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__caption__quote"> <!-- 在類名中永遠不要包含多個子元素 -->
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style lang="scss">
  .photo {
    &__img { }
    &__caption {
      &__quote { } // 在類名中永遠不要包含多個子元素
    }
  }
</style>

帶修飾符的組件

在某些狀況下，您可能但願更改組件中的單個元素。在這些狀況下，請向元素而不是組件添加修飾符。
我發現，修改元素比修改整個組件要少見得多，也沒什麼用。

<figure class="photo">
  <img class="photo__img photo__img--framed" src="me.jpg">
  <figcaption class="photo__caption photo__caption--large">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo{
    &__img--framed {
      /* 新增樣式修改 */
    }
    &__caption--large {
      /* 新增樣式修改 */
    }
  }
</style>

基於組件修改器的樣式元素

若是你發現正在以相同的方式修改同一組件的元素，則能夠考慮將修改器添加到組件自己。
並基於該修改器爲每一個子元素調整樣式。這將增長css層級，但使修改組件變得更加簡單。

<!-- 這樣寫 -->
<figure class="photo photo--highlighted">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo{
    &--highlighted {
      .photo__img { }
      .photo__caption { }
    }
  }
</style>

<!-- 別 -->
<figure class="photo">
  <img class="photo__img photo__img--highlighted" src="me.jpg">
  <figcaption class="photo__caption photo__caption--highlighted">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo__img--highlighted { }
  .photo__caption--highlighted { }
</style>

多詞名稱

BEM名稱有意使用雙下劃線和雙連字符而不是單個來分隔塊元素修飾符。緣由是能夠將單個連字符( -)用做單詞分隔符。
class名稱應易於閱讀， 慎用縮寫。

<!-- 這樣寫 -->
<div class="some-thesis some-thesis--fast-read">
  <div class="some-thesis__some-element"></div>
</div>

<style lang="scss">
  .some-thesis {
    &--fast-read { }
    &__some-element { }
  }
</style>

<!-- 別 -->
// These class names are harder to read
<div class="somethesis somethesis--fastread">
  <div class="somethesis__someelement"></div>
</div>

<style lang="scss">
  .somethesis {
    &--fastread { }
    &__someelement { }
  }
</style>