CSS BEM簡單介紹

所謂的BEM就是Block，Element，Modifier的縮寫。

（1）Block：

在BEM的理論中，一個網頁是由block組成的，比如頭部是個block，內容是block，logo也是block，一個block可能由幾個子block組成。

（2）Element：

element是block的一部分，具有某種功能，element依賴於block，比如在logo中，img是logo的一個element，在選單中，選單項是選單的一個element。

（3）Modifier：

modifier是用來修飾block或者element的，它表示block或者element在外觀或行。

我們通過BEM命名法寫樣式如下:

.block{}

.block-element{}

.block-modifier{}

.block-element-modifier{}

BEM將頁面解析為block和element，然後根據不同的狀態使用modifier來設定樣式。

我對BEM的思想理解可能不到位，對BEM的看法主要是由兩點：

（1）頁面CSS模組化，每個block就是一個模組，模組間相互獨立。

（2）多級的class命名，避免選擇器的巢狀結構。