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