BEM命名及其在sass中的實踐

Why use it

近幾年web應用的發展能夠用瘋狂來形容，依靠瀏覽器的支持以及前端技術和框架的發展，不少應用已經把大量的邏輯從服務器端遷移到了瀏覽器端，使用先後端分離技術，瀏覽器端與用戶進行交互來完成複雜的邏輯。因爲這個發展趨勢，Web應用的前端代碼的複雜度大大提升，尤爲是 JavaScript 和 CSS 代碼的數量大幅增長，面對空前龐大的css和js代碼量，造成科學的代碼組織方法和命名規範迫在眉睫。

好的命名規則應該知足如下幾個優勢：

1. 安全的命名，不會干擾其它css
2. 我須要很快知道一個 class 位於這個偉大工程的什麼位置
3. class 儘量少，且結構清晰
4. 嵌套不能夠太深，不然會造成難以維護的「謎」之樣式

BEM

BEM 是一種前端項目開發的方法學，由 Yandex 公司提出。BEM 的名稱來源於該方法學的三個組成部分的英文首字母，分別是塊（Block）、元素（Element）和修飾符（Modifier）。這三個不一樣的組成部分稱爲 BEM 實體。

Block——塊

塊便是一般所說的 Web 應用開發中的組件或模塊。每一個塊在邏輯上和功能上都是相互獨立的。塊中封裝了組件相關的 JavaScript、CSS 代碼和 HTML 模板。因爲塊是獨立的，能夠在應用開發中進行復用，從而下降代碼重複並提升開發效率。塊能夠放置在頁面上的任何位置，也能夠互相嵌套。

Element——元素

元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其餘元素。

Modifier——修飾符

修飾符用來定義塊或元素的外觀和行爲。一樣的塊在應用不一樣的修飾符以後，會有不一樣的外觀。

// 簡單地說
.block { /* styles */ }
.block__element { /* styles */ } 
.block--modifier { /* styles */ }

舉個栗子

如何使用呢BEM命名方法呢？請先看如下例子：

//咱們要爲這個菜單寫樣式
<ul class="">
    <li class="">Menu Item 1</li>
    <li class="">Menu Item 2</li>
    <li class="">Menu Item 3</li>
</ul>

1.「祖傳」命名

放在之前，咱們或許會這麼寫：

<ul class="nav">
    <li class="item selected">Menu Item 1</li>
    <li class="item">Menu Item 2</li>
    <li class="item">Menu Item 3</li>
</ul>

看了一下，仍是多清爽的。可是各位朋友是否注意到了一個問題：子元素item和其父元素menu，從命名上看，關係彷佛太不緊密。一個box也能夠有item子類，一個xxx也能夠包含一個item子類。看看其樣式的寫法：

//sass
.nav {
   list-style: none;
   .item {
       font-weight: bold;
      &.selected {
           color: red;
           }
      }
 }
 
//編譯後產生的css
.nav {
 list-style: none;
}
.nav .item {
 font-weight: bold;
}
.nav .item.selected {
 color: red;
}

從樣式文件上看，彷彿也沒有太大問題，可是，這是在咱們代碼層數較少的狀況。若是是一個複雜的頁面元素，咱們sass層級會很是深。編譯後的css，層級也會很深。

2.BEM命名

如今咱們使用BEM再來編寫看看：

<ul class="nav">
    <li class="nav__item nav__item--selected">Menu Item 1</li>
    <li class="nav__item">Menu Item 2</li>
    <li class="nav__item">Menu Item 3</li>
</ul>

//sass
.nav {
 list-style: none;

 &__item {
   font-weight: bold;

   &--selected {
     color: red;
   }
 }
}

//使用sass編譯後的css是
.nav {//菜單
 list-style: none;
}
.nav__item {//菜單item
 font-weight: bold;
}
.nav__item--selected { //被選中的菜單item
 color: red;
}

乍看之下，根據 BEM 命名規則產生的 CSS 類名都會很複雜，但實際上在熟悉了命名規則以後，能夠很容易理解其含義。其次，css再也不存在複雜的層級關係，瀏覽器渲染的時候，樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出，減小層級就能提高性能，對應靜態css文件大小也會減小。

不少人會吐槽兩個下劃線和兩個橫槓做爲鏈接符，並不優雅。可是我以爲，BEM是一種思想，是咱們須要理解的，至於咱們用什麼樣的鏈接符，什麼樣的方式實現，能夠根據本身項目的狀況考慮。