什么是BEM
BEM其實是塊（block）、元素（element）、修飾符（modifier）的縮寫，利用不同的區塊，功能以及樣式來給元素命名。這三個部分使用__與--連接（這里用兩個而不是一個是為了留下用于塊兒的命名）。命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
-
block代表更高級別的抽象或組件 -
block__element代表block的后代，用于形成一個完整的block的整體 -
block--modifier代表block的不同狀態或不同版本
常用規范
-
blockelementmodifier包含多個單詞時, 用一個中劃線-鏈接,如
-
el-dropdown-menuel-button
-
block和element用雙下劃線__鏈接, 例
- 表單項
form__item - 導航項
menu__item
-
element和modifier用雙中劃線--鏈接, 如表示按鈕的不同狀態,
- 默認：
el-button--default - 成功：
el-button--success
- 用js控制樣式時,css命名用
is-開頭,如
-
is-successis-failed is-disabled
例如，寫一個下拉菜單，參考element-ui
<div class="el-dropdown">
<span>下拉菜單
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<ul class="el-dropdown-menu">
<li class="el-dropdown-menu__item is-diasbled">選項一</li>
<li class="el-dropdown-menu__item el-dropdown-menu__item--divided">選項二</li>
</ul>
<div>
常用的block、element、modifier命名
- 參考element-ui的組件命名, 開發控制臺, 在控制臺查看組件的命名。
