在我们开发的时候，写了一个模块，在现有页面中测试都没问题。一段时间后，新需求新页面，该页面一打开，突然发现页面中样式都变样了，一查问题，原来是其他组件的样式和该页面的样式相互覆盖了。我相信大家在工作的过程中，或早或晚肯定都遇到过这样的问题吧
以往开发组件，我们都用“重名概率小”或者干脆起个“当时认为是独一无二的名字”来保证样式不冲突。显然这是不现实的，所以这个时候你就有必要来了解一下BEM的意义了
首先，BEM是什么，BEM是一个高可用的，强大的，而且简单的命名规范，它可以使得你的前端代码更加易读和理解，容易与他人协作，容易扩展，更加强壮和明确，关键是更加严谨。字面上解释的话，它代表：block，element和modifie。
block：这个block并非inline-block里的block，而是将所有东西都划分为一个独立的模块。一个header是block，header里嵌套的搜索框是block，甚至一个icon一个logo也是block，block可以相互嵌套。
element：block的一部分，当把它独立取出来时，没有任何实际意义。任何元素在语义上都是它自己的block紧密相连的。Element的名字可能包含拉丁字母，数字，句号以及下划线。CSS class名由block名成加两个下划线再加element的名字，最后组织成一个块名。HTML 任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的。
modifie：block或者element的flag。使用他们可以改变样式，行为或者是状态。modifier的名字可以包含拉丁字母，数字，句号以及下划线。CSS的class可以由block或者element名称后面加--组成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。复杂的modifier里由短线替代空格。
简单的说下用法：
Block独立模块：中横线Element子元素：俩下划线Modifier模块状态：一个下划线Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次
即：
模块：.Block模块_状态：.Block_Modifier模块__子元素：.Block__Element模块__子元素_状态：.Block__Element_Modifier
eg：
<button class="button">Normal button</button><button class="button button--state-success">Success button</button><button class="button button--state-danger">Danger button</button>
.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;}
优点：
单元性
块的样式从来不依赖同页面其它的元素，所以你永远不会遇到级联问题。您还可以将完成的项目中的块转移到新项目中。
重用性
不同方式组织独立的块，并智能地重用它们，可以减少必须维护的CSS代码量。通过一系列风格指南，您可以构建一个块库，使您的CSS超级有效。
结构化
BEM方法可以使得你的CSS代码结构性很好，从而更加容易理解。
eg：
当你的元素嵌套两级以及大于两级的时候就需要使用子孙选择器，如下：
<div class="c-card"><div class="c-card__header"><h2 class="c-card__header__title">Title text here</h2> </div> <div class="c-card__body"><img class="c-card__body__img" src="some-img.png" alt="description"><p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p> <p class="c-card__body__text">Adipiscing elit. <a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a></p> </div> </div>
BEM代表Block__Element--Modifier,并不是Block__Element__Element--Modifier。 因此，需要避免多个元素级别命名。这时如果你存在多层嵌套，你可能就需要重新审视你的组件结构了。
BEM命名并不严格绑定到DOM上，所以后代元素有多少层嵌套并没有关系。命名规范是帮助你识别顶层块组件之间的关系，如这里的c-card
<div class="c-card"><div class="c-card__header"><h2 class="c-card__title">Title text here</h2> </div> <div class="c-card__body"><img class="c-card__img" src="some-img.png" alt="description"><p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p> <p class="c-card__text">Adipiscing elit. <a href="/somelink.html" class="c-card__link">Pellentesque amet</a></p> </div> </div>
这意味着所有的后代元素仅仅受到card块的影响。因此我们可以将文本和图像移动到c-card__header，甚至引入新的c-card__footer元素而不会破坏语义结构
掌握上面的内容，相信你就可以写出，漂亮、规范的css来了。先写到这里吧，后面再继续完善吧～
