在團隊開發中，由於缺乏規範，樣式管理一直是開發中的痛點，樣式汙染，難以定製化，依賴性高，各種問題層出不窮。

而BEM是一個非常有用，強大，簡單的命名約定，可以讓你的前端程式碼更容易閱讀和理解，更容易協作，更容易控制。

當然，通常人們會認為BEM寫法難看，但是他的好處遠遠超過它外觀上的那點瑕疵。

1. BEM命名約定

BEM：塊（block）、元素（element）、修飾符（modifier）
命名約定的模式

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

其中塊可以用單個連字元來界定：如

.site-search{} //塊
.site-search__field{} //元素
.site-search--full{} //修飾符
 

2. 如何使用BEM

Block:一個獨立的，可以複用而不依賴其他元件的部分，可作為一個塊
Element:屬於塊的某部分，可作為一個元素
Modifier:用於修飾塊或元素，體現出外形行為狀態等特徵的，可作為一個修飾器
1）保證各個部分只有一級B__E–M，修飾器需要和對應的塊或元素一起使用，避免單獨使用。
2）僅以類名作為選擇器，不使用ID或標籤名來約束選擇器，且css中的選擇器巢狀不超過2層
3）避免 .block__el1__el2 的格式
如：

//css為例
<p class="article">
    <p class="article__body">
        <p class="tag"></p>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </p>
</p>

//less為例
.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}
 

BEM 規範雖然結構比較清晰，但有時候會產生程式碼冗餘。

為避免寫太多重複性的程式碼，我們要學會善於利用預編譯語言的（適當地使用 @include @extend 等）

3. 總結：

BEM 最難的部分之一是明確作用域是從哪開始和到哪結束的，以及什麼時候使用或不使用它。隨著不斷使用的經驗積累，你慢慢就會知道怎麼用，這些問題也不再是問題。

來源
http://www.php.cn/css-tutorial-407152.html
https://blog.csdn.net/bbsyi/article/details/80667072

擴充套件閱讀
BEM官方