OO CSS 学习

OO CSS 的概念

OO CSS 是什么？简单一句话就是面向对象的CSS。OO CSS 将页面可重用元素抽象成一个类，用Class 加以描述，而与其对应的HTML即可看成是此类的一个实例。

OO CSS 给我们带来了什么便利（作用）呢？

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

使用 OO CSS 进行开发时需要注意事项？

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

.mod .inner {...} // .mod 下面的inner
.inner{...}  // 不推荐直接式的声明

2. 结构和皮肤相分离（布局就布局，皮肤就是皮肤）

<div class="container simpleExt"></div> // html 结构

.container {...} // 控制结构的class

.simpleExt{...} // 控制皮肤的class

3. 容器和内容相分离

<div class="container"><ul><li>排行</li></ul></div>  // html 结构

.container ul {...}  // ul 依赖了容器

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

.rankList ul {...} // 解除与容器的依赖，可以从一个容器转移到其他容器

4. 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
5. 往你想要扩张的对象本身增加class而不是它的父节点。
6. 对象应保持独立性。
7. 避免使用ID选择器，权重太高，无法重用。
8. 避免位置相关的样式
9. 保证选择器相同的权重
10. 类名简短、清晰、语义化 OO CSS 的名字并不影响HTML的语义化

代码实例

oocss官网

掌握 oocss 设计思维，打造自己的基础库

比较火的重置兼容css库

• reset.css
• normalize.css
• neat.css （推荐）

三者区别

reset.css 是将各个浏览器的默认样式全部统一重置，通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。Normalize.css保持了许多默认的浏览器样式, 并不是一味的去除，意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

Neat.css 是基于normalize的全新的 CSS Reset，兼容 IE 6+ 以及其他现代浏览器，更加的人性化化处理方式。「normalize」的核心理念是不盲目重置为0，让元素拥有统一的默认间距，大小等表现。但针对国内大部分网站不是纯文字排版，Neat.css 选择回归「有即是无，无即是有」的理念，把大部分标签的默认margin，padding 均重置为 0。如果你需要对大面积文字或者文档快速美化，推荐单独引入专门针对汉字排版的type.css。