oo css

1、概念:
oo:面向对象
oocss将页面可重用元素抽象成一个类,用class加以描述,而与其对应的html即可看成是此类的一个实例。3d加速,完美渲染。
2、作用和注意事项:
作用:- 加强代码复,方便维护 -- 减小css体积 --提升渲染效率 -- 组件库思想,栅格布局可公用,减少选择器,方便扩展
注意事项:
1)不要直接定义子节点,应把共性声明放到父类。
2)结构和皮肤相分离
3)容器和内容相分离
4)抽离出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面
5)往你想扩展的对象本身增加Class而不是他的父节点,
6)对象应保持独立性
7)避免使用ID选择器,权重太高,无法重用
8)避免位置相关的样式
9)保证选择器相同的权重
10)类名要简短清晰语义化 oocss的名字并不影响html语义化
3、代码实战:
官网:http://oocss.org/
最常用的reset.css | normalize.css | neat.css |
neat网址http://thx.github.io/cube/doc/neat
http://thx.github.io/cube/doc/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 面向对象CSS的注意事项:1、对于组件,不要直接定义子节点,应把共性声明放到父类.mod .inner{....}...
    大瓶绿茶阅读 280评论 0 0
  • OO CSS 的概念 OO CSS 是什么?简单一句话就是面向对象的CSS。OO CSS 将页面可重用元素抽象成一...
    Junting阅读 294评论 0 0
  • 面向对象的CSS OO CSS的概念解读 OO CSS的作用和注意事项 OO CSS代码实战 众多开发者忽视了CS...
    mkv_me阅读 920评论 1 1
  • 分享的图片尺寸有限制,最好控制在宽:500内,高800内,否则某些安卓手机呼不起微信。 这个不一定正确,目前正在使...
    太上云初阅读 866评论 0 0
  • 使用简书来记录文字,缘起是我的老妈。 老妈是语文老师,而且是辅导作文很厉害的语文老师。但是我长这么大,一直没...
    錢小禹阅读 163评论 1 3