BEM命名规范详解

1、什么是BEM命名规范
BEM是指：块（block）、元素（element）、修饰符（modifier）的简写

2、学好BEM需要掌握：

1、块（block）
 2、元素（element） 
3、修饰符（modifier）
4、-（中划线）：仅作为连接字符使用，表示某个块或者子元素的多个单词之间的链接符号。 
5、__（双下划线）：用来链接块与块的子元素 
6、--（双中线）：用来链接块元素与修饰符

3、BEM命名的好处
BEM命名的核心就是可以清晰的描述页面的结构,从其名字就可以知道某个标记的含义，于是通过查看class属性就可以知道元素之间的关联。

4、block、element、modifier之间的关系

block: 独立的实体它本身就是有意义的 如：header、container、aside

element: block的一部分（一般为块的子元素） 如：item

modifier: 块或元素上的修饰使用它改变外观或行为的 如：red、size、disabled

5、BEM常见的几种情况

.block{}  
.block__element{}  
.block__element--modifier{}  

.block{}  
.block__element-name{}  
.block__element-name--modifier{}

.block-name{}  
.block-name__element{}  
.block-name__element--modifier{}

.block-name{}  
.block-name__element-name{}  
.block-name__element-name--modifier{}

.block--modifier{}  

6、BEM在实际中的使用

<style>
    .project-list{}
    .project-list__item{}
    .project-list__item--red{}
    .project-list__item--green{}
</style>

<div class="project-list">
    <div class="project-list__item"></div>
    <div class="project-list__item--red"></div>
    <div class="project-list__item--green"></div>
</div>

7、在less或sass中使用BEM

.project{
    height:100px;
    &__item{
        height:50px;
        &--red{
            color: red;
        }
    }
}

.project {
  height: 100px;
}
.project__item {
  height: 50px;
}
.project__item--red {
  color: red;
}