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语义化。

 

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