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/

转载于:https://juejin.im/post/5b08b4ebf265da0dd7169111