前端风格指南

1.css命名规范

特别声明：此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相关信息
——作者：csswizardry

——译者：David

使用BEM约定
BEM的意思就是块（block）、元素（element）、修饰符（modifier）

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

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block–modifier代表.block的不同状态或不同版本。

对比一下，遵循BEM约定的css样式，和常规的css样式，BEM的的结构和描述更加明显

//遵循BEM
.person{}
.person__hand{} //元素
.person--female{} // 修饰符
.person--female__hand{}
.person__hand--left{}

//常规
.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}	

下一个对比例子

//常规
<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

//BEM约定
<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>	

OOCSS（面向对象css）的BEM约定，仅通过CSS选择器的名字我们就能获取到以上全部信息

.media{}
.media__img{}
.media__img--rev{}
.media__body{}	

对比

//常规
<div class="media">
  <img src="logo.png" alt="Foo Corp logo" class="img-rev">
  <div class="body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>	

//BEM
<div class="media">
  <img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
  <div class="media__body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>

分清改使用BEM的场合，有些地方没必要用BEM约定，如header_logo，但我们没必要这么做。使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。这个例子中，网站logo完全是恰巧在.header的内部，它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文，因此你要确定只在你需要用到BEM的地方你才使用它。再看一个例子：

<div class="content">
  <h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>

在这个例子里，我们也许仅仅只需要另一个class，可以叫它.headline；它的样式取决于它是如何被层叠的，因为它在.content的内部；或者它只是恰巧在.content的内部。如果它是后者（即恰巧在.content的内部，而不总是在）我们就不需要使用BEM。

然而，一切都有可能潜在地用到BEM。我们再来看一下.site-logo的例子，想象一下我们想要给网站增加一点圣诞节的气氛，所以我们想有一个圣诞版的logo。于是我们有了下面的代码：

.site-logo{}
.site-logo--xmas{}	

我们可以通过使用–修饰符来快速地为我们的代码构建另一个版本。

BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。