什么是 OOCSS

OOCSS (opens new window) 全称是 Object-Oriented CSS，也就是面向对象的 CSS。它其实是一种容易重用的 CSS 规则，关键的一点就是如何在页面中识别、创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。

OOCSS——概念篇 (opens new window)

OOCSS vs. OOSCSS (opens new window)

OOCSS 的作用

• 加强代码复用，方便维护。

• 减小 CSS 代码体积。

• 提升渲染效率（逐层渲染）。

• 组件库思想、栅格布局可共用、减少选择器、方便扩展。

OOCSS 的注意点

• 不要直接定义子节点，应把共性声明放到父类。

• 结构与皮肤相分离。

<div class="container simpleExt"></div>  // html 结构
.container{} // 控制结构的 class
.simpleExt{} // 控制皮肤的 class

• 容器和内容相分离.

<div class="container"><ul><li>排行</li></ul></div>
.container ul{} // ul 依赖了容器
<div class="container"><ul class="rankList"><li>排行</li></ul></div>
.rankList li{} // 解除与容器的依赖，可以从一个容器转移到其他容器

• 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面（只要把最外层的 class 引进来，然后去组件库找类，组装页面）。

• 往你想要扩展的对象本身添加 class 而不是它的父节点。

• 对象应保持独立性。

• 避免使用 ID 选择器，权重太高，无法重用。

• 避免位置相关的样式。

#header .container{},#footer .container{}
.container{} // 上面的直接提出来就行，肯定有共性的
#header h1{},#footer h1{} // 如果是有不同的，可以像下面这样
h1 .h1{}  h2 .h2{}
<h1><div class="h6"></div></h1>

• 保证选择器相同的权重（不要去嵌套太多，不然状态改变很麻烦）。

• 类名应该简短、清晰、语义化，OOCSS 的名字并不影响 HTML 语义化。

推荐的公共 CSS 样式库

• Reset CSS (opens new window)

重置效果比较粗暴，不管是想要的还是不想要的标签都会设置一个初始样式。

• Normalize.css (opens new window)

相比 Reset CSS 做了改进，温和了许多，核心理念是不盲目重置为 0，让元素拥有统一的默认间距，大小等表现。保证每个浏览器显示效果统一，相当于是一种补充。

• Neat.css (opens new window)

结合了 Reset CSS 和 Normalize.css 的优点。解决了以下问题：

1、解决 Bug，特别是低级浏览器的常见 Bug。

2、统一效果，但不盲目追求重置为 0。

3、向后兼容。

4、考虑响应式。

5、考虑移动设备。