OO CSS 的概念
OO CSS 是什么？简单一句话就是面向对象的CSS。OO CSS 将页面可重用元素抽象成一个类，用Class 加以描述，而与其对应的HTML即可看成是此类的一个实例。
OO CSS 给我们带来了什么便利（作用）呢？
- 加强代码复用以便方便维护
- 减小CSS体积
- 提升绚烂效率
- 组件库思想、栅格布局可共用、减少选择器、方便扩展
使用 OO CSS 进行开发时需要注意事项？
- 不要直接定义子节点，应把共性声明放到父类。
.mod .inner {...} // .mod 下面的inner
.inner{...} // 不推荐直接式的声明
- 结构和皮肤相分离（布局就布局，皮肤就是皮肤）
<div class="container simpleExt"></div> // html 结构
.container {...} // 控制结构的class
.simpleExt{...} // 控制皮肤的class
- 容器和内容相分离
<div class="container"><ul><li>排行</li></ul></div> // html 结构
.container ul {...} // ul 依赖了容器
<div class="container"><ul class="rankList"><li>排行</li></ul></div>
.rankList ul {...} // 解除与容器的依赖，可以从一个容器转移到其他容器
- 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
- 往你想要扩张的对象本身增加class而不是它的父节点。
- 对象应保持独立性。
- 避免使用ID选择器，权重太高，无法重用。
- 避免位置相关的样式
- 保证选择器相同的权重
- 类名简短、清晰、语义化 OO CSS 的名字并不影响HTML的语义化
代码实例
掌握 oocss 设计思维，打造自己的基础库
比较火的重置兼容css库
三者区别
reset.css 是将各个浏览器的默认样式全部统一重置，通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。Normalize.css保持了许多默认的浏览器样式, 并不是一味的去除，意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
Neat.css 是基于normalize的全新的 CSS Reset，兼容 IE 6+ 以及其他现代浏览器，更加的人性化化处理方式。「normalize」的核心理念是不盲目重置为0，让元素拥有统一的默认间距，大小等表现。但针对国内大部分网站不是纯文字排版，Neat.css 选择回归「有即是无，无即是有」的理念，把大部分标签的默认margin，padding 均重置为 0。如果你需要对大面积文字或者文档快速美化，推荐单独引入专门针对汉字排版的type.css。
网友评论