CSS命名规范 BEM

     在我们开发的时候，写了一个模块，在现有页面中测试都没问题。一段时间后，新需求新页面，该页面一打开，突然发现页面中样式都变样了，一查问题，原来是其他组件的样式和该页面的样式相互覆盖了。我相信大家在工作的过程中，或早或晚肯定都遇到过这样的问题吧

   以往开发组件，我们都用“重名概率小”或者干脆起个“当时认为是独一无二的名字”来保证样式不冲突。 显然这是不现实的，所以这个时候你就有必要来了解一下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来了。先写到这里吧，后面再继续完善吧～