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语义化。