元件庫使用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 {
}