2015-12-12复习之OO CSS

OOCSS的定义

OO（Object Oriented）面向对象

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

举个简单例子：

.p{ color:red; text-align:center;}
<p class="p">hello world</p>

.red{color:red;}
.alignCenter{text-align:center;}
<p class="red alignCenter">hello world</p>

具体概念见：OOCSS——概念篇

OO CSS的作用

加强代码复用以方便维护

减小css体积

提升渲染效率

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

OO CSS的注意事项

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

2、结构和皮肤相分离（class="containter"---->class=“containter simpleEXT”）

3、容器和内容相分离（<div class="c"><ul class="u"><li></li></ul></div>  .c ul{}---->ul.u{}）

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

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

6、对象应保持独立性。（<div class="d1"><div class="d2"></div></div>----><div class="d1 d2"></div>）

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

8、避免位图相关的样式。

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

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