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命名，避免选择器的嵌套结构。