CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）

一、OO  CSS 的概念解读

（一）众多开发者忽视了CSS的表现，认为其太过简单，是一种机械的工作，而把更多关注在JS的性能或者其他方面。

（二）OO CSS 将页面可重用元素抽象成一个类，用class 加以描述，而与其对应的html 即可看成是此类的一个实例。

 

二、OO CSS 的作用

（一）加强代码复用以便方面维护。

（二）减少 CSS 体积（用父类的即可）。

（三）提升渲染效率。

（四）组件库思想、栅格布局可共同、减少选择器、方面扩展。

 

三、OO CSS 的注意事项（使用高效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> //html 结构
   .rankList ul{...}  //解除与容器的依赖，可以从一个容器转移到其他容器

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

（五）往你想要扩展的对象本身增加 class 而不是其父节点。

（六）对象应该保持独立性

<div class="container"><div class="mod"></div></div> //html 结构
      .container {...}  
      .container .mod {...} //控制结构的class
   //应该写成如下：
   <div class="container mod"> </div> //html 结构

（七）避免使用ID选择器，权重太高，无法重用。

（八）避免位置相关的样式

#header .container {...}
 #footer .container {...}
//可直接写成 .container {...}
   
   #header h1 {...}
   #footer h1 {...}
   h1,.h1 { }
   h2,.h2 { }
   <h1 class="h6"></h1>

（九）保证选择器相同的权重

（八）类名应该剪短、清晰、语义化，OO CSS 的名字并不影响html 语义化