深入解读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（分离容器和内容）

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