OO CSS的我的理解

　　这两天的学习，学到了OO CSS的部分，说实话，我仍是有些不太懂得的。做为学习笔记记录下来如今的个人想法（若有错误还望能够给予我指正）和学习到的知识（OO CSS的概念解读），往后可能学习的更多我会有更新的理解。

 

　　先讨论一下问题产生的背景。CSS代码遇到的问题？

　　　　1.须要书写大量看似无逻辑的代码，不方便维护及拓展；

　　　　2.可重用性差，面对不一样的CSS名称，不清楚到底被哪些模块引用到了，也不敢修改和删除，后面的样式只能往上面堆积；

　　　　3.怕重名，怕修改错，胡乱堆积，致使CSS愈来愈大；

 

　　这时候就须要面向对象的CSS（OO CSS）来管理咱们的样式。OO CSS将页面可重用元素抽象成一个类，用class加以描述，而与其对应的HTML便可当作是此类的一个实例。在面向对象编程中，每个类都有一个实例。而在HTML和CSS相互配合中，当一个HTML能够应用上一个class时，当前的这个元素就是这个类的实例。当咱们建一个父类的class，好比在其中设置“color:red”，此时咱们想重写这个父类，咱们就能够在其中继续重写，并且其中的每个具体的类均可以向上对应一个抽象的类。并且OO CSS也具备封装、继承、多态这样的特性。可是咱们也没有什么必要强制的将面向对象的css 和面向对象编程的各类特色扣在一块儿，最主要的是要体会OO CSS中的类，咱们能够复用类还能够重写类。由此也引出了OO CSS的一个应用范围，当项目很小的使用，用不用OO CSS影响都不是很大，由于自己去维护这些CSS的成本就不大。可是当遇到大型项目的时候，就须要有总体的概念，而且也方便其余的开发人员经过父类去修改、添加。随着CSS的发展，CSS3的应用，以及CSS对大部分浏览器的支持。如今的CSS，也拥有了前置处理器（用来很好的编写样式）和后置处理器（完善不一样浏览器所实现的前缀）。

 

　　接下来咱们讨论一下OO CSS的做用和注意事项

　　做用：

　　1.增强代码复用以方便维护。

　　2.减少CSS体积（由于他有父类，父类替咱们作了不少无需重复的劳动，这时，该父类下面的子类就不要重写在父类中已经有的方法。）

　　3.提高渲染效率（父类先渲染总体轮廓，在让在其中的子类逐层进行内部渲染）

　　4.组件库思想（创建大型项目需具有：创建一个总体项目公用的大型的父类，这个父类里面有全部的公用的东西）栅格布局可公用，减小选择器，方便扩展。

　　注意事项：

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

代码示例：

.mod .inner{......}   //声明.mod下面的inner，在mod中作了不少公用操做
.inner{......} //不建议直接声明.inner，由于不可重用。

　　2.结构与皮肤相分离。

代码示例：

<div>class="container simpleExt"></div>//html结构，外面是container（容器），里面是simpleExt（皮肤）。不该该把全部的都写在一块儿。应该各司其职。
.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.对象应该保留独立性。

代码示例：

<div class="container"><div class="mod"></div></div>    //html结构
.container {......} .container .mod {......}    //控制结构的css
与其写这个之上的两个结构，不如结合成一个结构来写。
<div class="container mod"></div>   

　　7.避免使用ID选择器，权重过高，没法重用。（ID选择器主要针对JS使用）

　　8.避免位置相关的样式。

代码示例：

#header .container{......}, #footer .container{......}    //当header和footer里面都有container并且两个都有相同的共性，则把他们提出来成为一个（以下）
.container{}

#header h1{......}, #footer h1{......}    //当header和footer中的h1要不同的时候，能够写成以下
h1,.h1{}  h2,.h2{}  <h1><class="h6"</h1>    //写成h1和.h1这样一直写到h6，分别定义成不同的，而后再把h1中设一个class，这时这个h1就长h6的样子了。

　　9.保证选择器相同的权重。（选择器权重很差协调，不方便升级）

　　10.类名 简短 清晰 语义化OOCSS的名并不影响HTML语义化。

 

最后要说，对一个新知识最好的理解，就是去实践它！