入門BEM

前言

為什麼不用ID識別符號

主要考慮到樣式重用性以及與頁面的耦合性。ID本來就是唯一的而且權值那麼大，還不如寫在行內樣式。

#button {
  text-decoration: underline;
}

為什麼不用大於三層巢狀選擇器

巢狀選擇器增加了程式碼耦合，使重用變得不可能，過多的巢狀會導致顯示效能�下降。簡潔的選擇器不僅可以減少css檔案大小，提高頁面的載入效能，讓瀏覽器解析時也會更加高效。同時也會提高開發人員的開發效率，降低了維護成本。子代選擇器不好的地方還在於，如果層次關係過長，邏輯不清晰，非常不利於維護。

css的匹配原理不是從左到右的，而是從右到左的，從右邊開始匹配是為了儘早過濾掉一些無關的樣式規則和元素。

.button_hovered .button__text {
  text-decoration: underline;
}

為什麼不用組合選擇器

組合選擇器的耦合性更強，而且可維護性更加差。

.button.button_theme_islands {
  text-decoration: underline;
}

介紹

BEM是Block，Element，Modifier的縮寫。下面分別來介紹一下這三個概念：

• 塊（Block）是一個塊級元素，可以理解為元件塊，比如頭部是個block，內容也是block，一個block可能由幾個子block組成。
• 元素（Element）element是block的一部分完成某種功能，element依賴於block，比如在logo中，img是logo的一個element，在選單中，選單項是選單的一個element。
• 修飾符（Modifier）modifier是用來修飾block或者element的，它表示block或者element在外觀或行為上的改變，例如actived。

這裡引用BEM的定義一文中的兩張圖：

我們通過BEM命名法寫樣式如下：

• .block{}
• .block__element{}
• .block--modifier{}
• .block__element--modifier{}

BEM解決了的問題，

• 頁面CSS模組化，每個block就是一個模組，模組間相互獨立，不會造成汙染
• 多級的class命名，避免選擇器的巢狀結構
• 減少萬用字元*或者類似[hidden="true"]這類選擇器的使用
• 巧妙運用scss的特性，保證了樣式的可維護性

BEM將頁面解析為block和element，然後根據不同的狀態使用modifier來設定樣式，在scss的屬性幫助下，其實，寫BEM並不麻煩。

使用scss寫BEM

靈活的&

當巢狀使用&時，它會直接抓取父選擇器的類名，自動拼接上元素名字，避免CSS檔案中元件樣式的衝突。這樣，我們可以得到一個完整的BEM結構的類名，這樣有效利用scss的巢狀特性避免CSS檔案中元件樣式的衝突。

示例：

.header {
  &__text {
    text-decoration: underline; 
  }
  &__image {
    background-color: steelblue;
  }
}

強大的@extend

@extend是scss的繼承語法，它可以將父級的屬性繼承到子級。主要使用在modifier上，因為改變狀態的屬性和原來的基本保持一致。你可以弄少一個classname。

示例：

<nav class="nav">
  <ul class="nav__container">
    <li class="nav__item"></li>
    <li class="nav__item"></li>
    <li class="nav__item"></li>
    <li class="nav__item--active"></li>
  </ul> 
</nav>

.nav {
  background-color: steelblue;
  &__container {
    display: flex;
    justify-content: space-between;
  }
  &__item {
    color: white;
    &--active {
      @extend .nav__item;
      border-bottom: 1px solid red;
    }
  }
}

參考

• BEM的定義
• 如何更好的使用BEM
• CSS效能分析，如何優化CSS提高效能