.site-header__navigation { … } /* element */
也就是说site-header是我们的块。那么logo和navigation是这个块的元素，圣诞版本的logo是修饰符。也许它看起来简单，但是它真的很强大。一旦你开始使用它，会发现他能让你的结构更加的优秀。当然也有反对的理由，那就是因为其语法。是的，或许看起来有点丑，但为了有一个好的结构，我会准备为此做出牺牲。（更好的阅读请点这和这）。
OOCSS
自从我发现BEM，我就开始在思考如何正确的使用我的类名。也许，我的第一件事情要读一篇关于面向对象的CSS。面向对象编程添加了一些抽像的概念，CSS也支持这样的概念。如果你使用了CSS预处理器，你或多或少知道一些。做为一个编写代码的人，我发现这个概念离我平时编程很近，拿JavaScript为例，有两个主要原则：
单独的结构和样式
我们用下面的例子来进行介绍：
CSS Code复制内容到剪贴板
.header {
background: #BADA55;
color: #000;
width: 960px;
margin: 0 auto;
}
.footer {
background: #BADA55;
text-align: center;
color: #000;
padding-top: 20px;
}
其中有一些样式是重复的，我们可以考虑在另一个类中提取这些相同的样式：
CSS Code复制内容到剪贴板
.colors-skin {
background: #BADA55;
color: #000;
}
.header {
width: 960px;
margin: 0 auto;
}
.footer {
text-align: center;
padding-top: 20px;
}
所以我们使用colors-skin做为一个对象，用来扩展。这样HTML模板修改成像这样：
<div class="header colors-skin"> … </div>
<div class="colors-skin"> … </div>
<div class="footer colors-skin"> … </div>
这样做有几个好处：
有一个类，它可以使用多次
如果需要修改，只需要修改一个地方
在CSS样式中删除重复的代码，使其文件变得更低
