从 BEM 谈大型项目中 CSS 的组织和管理（2）OOCSS

look_w

OOCSSOOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。面向对象方法学中的很多理念，如模块化、单一功能原则（Single responsibility principle）和关注点分离（Separation of concerns）等，对于需要组织和管理大量 CSS 代码的应用也是适用的。OOCSS 提出了 CSS 对象的概念，用来表示重复出现的可视化模式。这些模式可以被抽象成独立的 HTML、CSS 和 JavaScript 代码片段，并在整个项目中共享。
OOCSS 有两个重要的原则：
第一个原则是把结构和外观分开。重复出现的可视化模式应该只关注外观，而与 DOM 结构无关。这就要求 CSS 对象中的每个组成部分都有名称，并在 DOM 结构中通过 CSS 类名与之对应。因此在 OOCSS 中的样式规则都是使用类别选择器，而不依赖特定的 DOM 结构。这样可以提高 CSS 对象的可复用性。
第二个原则是把容器和内容分开。这就要求在 CSS 样式中不应该出现与 DOM 树中的位置相关的规则。CSS 样式应该只关注内容，而不是 DOM 元素及其层次关系。
OOCSS 除了这一套指导理论之外，还提供了一些 CSS 对象作为示例。比如多媒体对象，用来描述图片视频及其相关的文字。多媒体对象在 Facebook、Twitter 和微博上会经常出现。每条微博的左侧是用户的头像，右侧是文本内容。多媒体 CSS 对象中的 CSS 类有 media、img、bd 和 imgExt。这几个 CSS 类的含义如下：

• media - 最外层的 CSS 类，用来表明这是一个多媒体对象。
• img - 表示出现在左侧的链接、图片或视频对象。
• bd - 表现出现在右侧的主要内容。
• imgExt - 表示额外的链接、图片或视频对象，出现在 bd 表示的主要内容的右侧。

  给出了使用多媒体 CSS 对象的 HTML 片段。
清单 5. 使用多媒体 CSS 对象的 HTML 代码

1 2 3 4 5 6 7 8

<div class="media"> <a href="http://oocss.org/" class="img"> <img src="https://placehold.it/50x50"/> </a> <div class="bd"> OOCSS media object </div> </div>

  给出了多媒体 CSS 对象中的样式声明。
清单 6. 多媒体 CSS 对象的样式声明

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.media { margin: 10px; }    .media, .bd { overflow: hidden; }    .media .img { float: left; margin-right: 10px; }    .media .img img { display: block; }    .media .imgExt { float: right; margin-left: 10px; }