CSS OOCSS简单介绍

OOCSS是（Object Oriented CSS），顾名思义就是面向对象的CSS。

OOCSS主要有两个原则:

（1）.结构和样式分离:

比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的:

.btn-primary{
    width:100px;
    height:50px;
    padding:5px 3px;
    background:#ccc;
    color:#000;
}
.btn-delete{
    width:100px;
    height:50px;
    padding:5px 3px;
    background:red;
    color:#fff;
}

这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，将其抽象的部分提取出来，如下：

.btn{
    width:100px;
    height:50px;
    padding:5px 3px;
}
.primary{
    background:red;
    color:#fff;
}
.delete{
    background:red;
    color:#fff;
}

这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。

（2）容器和内容分离:

我们平时写代码一定写过这样代码

.content h3{
  font-size:20px;
  color:#333;
}

这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h3。

所以OOCSS推荐分离容器和内容，可以修改成：

.title{
  font-size:20px;
  color:#333;
}

关于这一点，个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：

.menu li{
  font-size:12px;
}

这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，如下:

.menu-item{
  font-size:12px;
}

这样页面的li标签需要引用menu-item类。