組件庫使用BEM

bem的優點

最近在開發一個組件庫，選擇了BEM做爲css的組織形式，主要考慮瞭如下三個方面的優點：

1. 邏輯分層，容易理解。BEM基於block、element、modify的組織形式，基本與組件的組織形式吻合。只要遵循了BEM的命名方式，對於開發和修改組件，哪些元素和狀態已經存在，均可以直觀的看出來。反過來，經過html標記的BEM命名，能夠直觀地理解組件的功能和依賴關係。
2. 強約束，便於團隊協做。只要定義好了大的框架和命名，那麼團隊其餘成員基於BEM的規範進行開發，理解成本下降，並且基本不存在樣式衝突的問題。

預編譯器支持

目前經常使用的css預編譯器，如sass、less、stylus，基本對BEM的支持都很好，舉個例子(語法差別暫時忽略)：

.block {
    &__element {
    }
    &--modifier {
    }
}

編譯後：

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