面向对象css oocss

一、概念

oocss：将页面可重用元素抽象成一个类，用class加以描述，而对其余对应的HTML便可当作是此类的一个实例

二、做用

   一、增强代码复用以便方便维护

   二、减少css体积

   三、提高渲染效率

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

三、注意事项

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

    二、结构和皮肤相分离

       <div class="container simpleExt"></div>

       container是控制结构class

       simpleExt是控制样式class

   三、容器与内容相分离

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

    .container ul 依赖容器

    改为。rankList.ul  解除与容器的依赖

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

  五、往你想要拓展的对象自己增长class,而不是他的父节点

  六、对象应保持独立性

  七、避免使用ID选择器，权重过高，没法重用

  八、避免位置相关的样式

  避免代用header、footer、nav等相关的样式

  九、保证选择器相同的权重：不利于升级

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

四、代码实战

官网站：oocss.org

五、reset.css

六、normalize.css

七、Neat.css