一、OO CSS的概念与解读

OO CSS将页面可重用元素抽象成一个类，用class加以描述，而与其对应的HTML即可看成是此类的一个实例。

二、OO CSS作用与注意事项

1、加强代码复用以便方便维护
2、减少CSS体积
3、提升渲染效率
4、组件库思想、栅格布局可共用、减少选择器，方便扩展

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

代码示例：

// Good
.mod {
  font-size: 12px;
  color: #666;
}

// Bad
.mod .inner {
  ......
}

// Bad
.inner {
  ......
}

2、结构与皮肤进行分离。

代码示例：

<div class="container simple-ext"></div>

.container {
  ......
}

.simple-ext {
  ......
}

3、容器与内容相分离

代码示例：

// Good
<div class="container">
  <ul class="rank-list">
    <li>排行</li>
  </ul>
</div>

.rank-list {
  ......
}

// Bad
<div class="container">
  <ul>
    <li>排行</li>
  </ul>
</div>

.container ul {
  ......
}

4、抽象出可重用的元素，建好组件库，在组件库内存寻找可用的元素组装页面。

5、往你想要扩展的对象本身增加class而不是他的父节点。

6、对象应保持独立性

代码示例：

// Good
<div class="container mod"></div>

// Bad
<div class="container">
  <div class="mod"></div>
</div>

.container {
  ......
}

.container .mod {
  ......
}

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

8、避免位置相关的代码

代码示例：

// Good
.container {
  ......
}

// Bad
#header .container {
  ......
}

#footer .container {
  ......
}

// Good
h1, .h1 {
  ......
}

h2, .h2 {
  ......
}

<h1 class="h2"></h1>

// Bad
#header h1 {
  ......
}

#footer h1 {
  ......
}

9、保证选择器相同的权重

10、类名，简短，清晰语义化OO CSS的名字并不影响HTML语义化。

三、OO CSS代码的实战

oocss.org
reset.css
normalize.css
neat.css