BEM思想（css命名規範）

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

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

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

1. BEM命名約定

BEM：塊（block）、元素（element）、修飾符（modifier）

命名約定的模式

.block{}

.block__element{}

.block--modifier{}

1

2

3

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

.site-search{} //塊

.site-search__field{} //元素

.site-search--full{} //修飾符

1

2

3

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;}

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

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

3. 總結：

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！