阅读 541

BEM--模块化CSS的命名规范及应用场景

BEM解析

B是Block,也就是在对整个页面布局时,划分的单独模块,例如header、article、menu等。

E是Element,是上面的B,也就是划分出的独立模块中的元素,和所在模块为父子关系。

M是Modify,英语解释有修饰的意思,官网给出的解释是这样的“A flag on a block or element. Use them to change appearance or behavior.”,用我拙劣的英语翻译一下,M指的是对block或element的进行标记,用来表明此类使用后block或element的样式或者动作改变结果。

BEM使用方式、命名方式及例子

(1)使用方式

根据上面BEM命名解析可以看出,BEM命名使用时,需要先在布局时对整体页面进行模块划分,获得B,然后编写B模块的样式,然后抽取模块内的相同元素E,编写样式,最后添加元素特殊样式效果类M,叠加生成想要的效果,拿Git上的按钮举例一下,按钮如下:

HTML代码:

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>
复制代码

CSS代码

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}
复制代码

(2)命名方式

Block命名:BEM命名中,B是第一级,所以命名是直接的.className命名方式,比如一个B的类名是block,则命名就是“.block”,具体例子如下:

html代码:

    <div class="blcok"></div>
复制代码

css代码

    .block{
        font-size:20px;
    }
复制代码

Element命名: Block和Element是相互联系的,这里我再啰嗦一下,BEM命名的本质是使用模块化CSS的编写方式,Blcok就是模块,Element是和模块相联系的元素,所以给Element命名是需要显式的表明和Block的关系,连接时通过“--”,格式为Block--Element格式,具体例子如下:

HTML代码:

<div class="block">
	  ...
	  <span class="block__elem"></span>
</div>
复制代码

CSS代码

    block__elem{
        color: #4ef;
    }
复制代码

Modify命名: Modify是元素的标记类,用来设置特殊样式或者效果,Block或Element和Modify的连接使用“__”,格式是Block__Modify,Block--Element__Modify,具体例子如下:

HTML代码:

<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
复制代码

CSS代码

    .block{
        font-size: 20px;
    }
    
    .block--mod{
        ......
    }
    
    .block--size-big{
        padding: 30px;
    }
    
    .block--shadow-yes{
        box-shadow: #cccc 1px 1px 1px;
    }
复制代码

后记: 学的东西比较少,视野有限,失误的地方请多多指教。内容代码参考BEM官网,传送门getbem.com/

文章分类
前端
文章标签