深入解读CSS的OOCSS和SMACSS以及BEM

最近在The Sass Way里看到了Modular CSS typography一文，发现文章在开头部分就提到了OOCSS、SMACSS、BEM、这3个词。“如果还不知道这些是什么，请先不要继续看下去”，联想到作者这样友好（gāo lěng）的提醒，作为围观群众，自然要有所回应。所以，本文在这里分别介绍它们。

OOCSS、SMACSS及BEM都是有关css的方法论（准确地说，其中BEM应该是一个完整的前端开发理论，不仅限于css），可作为实现优秀css架构（css architecture）的指南。

css易于理解，但应用和维护并不简单。在各种开发情景下，css都可能成为一个问题点。因此，我们编写和组织css应认真、用心。
OOCSS

OOCSS（Object Oriented CSS），字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论，其主要的两个原则是：

    Separate structure and skin（分离结构和主题）
    Separate container and content（分离容器和内容）

用一个例子来说明。请看下面这样的图文排列：

1. <div class="media media-shadow">   
2.     <div class="media-image-container">   
3.         <img class="media-image" src="rean.jpg" alt="">   
4.     </div>   
5.     <div class="media-body">   
6.         <p class="media-text">本作的主角，帝国北部地方贵族施瓦泽男爵的养子，也是托尔兹士官学校特科班“Ⅶ组”的成员。</p>   
7.     </div>   
8. </div>   
9.   
10. .media{   
11.     padding: 10px;   
12. }   
13. .media:after{   
14.     display: table;   
15.     clear: both;   
16.     content: " ";   
17. }   
18. .media-image-container{   
19.     float: left;   
20.     margin-right: 10px;   
21. }   
22. .media-image{   
23.     display: block;   
24. }   
25. .media-body{   
26.     overflow: hidden;   
27. }   
28. .media-shadow{   
29.     box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);   
30. }  

上面这段代码用media表示了这种图文排列的页面元素。如果把构成它的html、css及javascript（如果有）看做一个整体，那就相当于这是一个元件，或者说对象（object）。它可以在站点的任何地方被重用。

这样是如何体现OOCSS的两个原则的呢？
Separate structure and skin

分离结构和主题是在于将一些视觉样式效果（例如background、color）作为单独的“主题”来应用。在上面的例子中的阴影效果，没有被直接写在media的样式规则内，而是被单独写在了一个名为media-shadow的class中。因此，它成为了可选择、可拆分的主题。如果不需要对应主题，什么也不要加，如果需要，加上对应的class，就是这样的思路。
Separate container and content

分离容器和内容要求使页面元素不依赖于其所处位置。在上面的例子中，css的选择符都很短，无继承选择符（例如.header .media { }），所以，这个图文排列的元件，可以在任何地方使用，且会有一致的外观。

如果需要在特定的地方让这个元件看起来不一样一些，继续为这个元件增加class，将“不一样的部分”作为可配置的选项。元件的外观仍不依赖其所处位置。
操作指南

可以看出，OOCSS风格的css可以描述为两点：

    增加class
    不使用继承选择符

OOCSS追求元件的复用，其class命名比较抽象，一般不体现具体内容。
SMACSS

SMACSS（Scalable & Modular Architecture for CSS），是由Jonathan Snook提出的css理论。其主要原则有3条：

    Categorizing CSS Rules（为css分类）
    Naming Rules（命名规则）
    Minimizing the Depth of Applicability（最小化适配深度）

这些原则分别是什么意思呢？
Categorizing CSS Rules

这一点是SMACSS的核心。SMACSS认为css有5个类别，分别是：

    Base
    Layout（Major Components）
    Module（Minor Components）
    State
    Theme

Base Rules，基础样式，描述的是任何场合下，页面元素的默认外观。它的定义不会用到class和ID。css reset也属于此类。

Layout Rules，布局样式。它和后面的Module Rules一同，描述的是页面中的各类具体元素。元素是有层次级别之分的，Layout Rules属于较高的一层，它可以作为层级较低的Module Rules元素的容器。左右分栏、栅格系统等都属于布局样式。

Module Rules，模块样式。它可以是一个产品列表，一个导航条。一般来说，Module Rules定义的元素放置于前面说的Layout Rules元素之内。模块是独立的，可以在各种场合重用。

State Rules，状态样式，描述的是任一元素在特定状态下的外观。例如，一个消息框可能有success和error两种状态，导航条中的任一项都可能有current状态。

继续OOCSS中的例子，下面新增的让元素不显示的is-hidden就属于State Rules：

1. <div class="media media-shadow is-hidden"<