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

回复

我来回复
  • 暂无回复内容