1 OOCSS的定义：
Object Oriented css（面向对象css）的缩写，是一种用最简单的方式编写的CSS代码，从而使代码 重用性，可维护性和可扩展性更好的书写方法。
2 OOCSS的用法：
例如：有两个大小 ，外边距相同的div。
我们可以这样写代码
.box1{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
background-color: #8A2BE2;
font-size: 22px;
}
.box2{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
background-color: blue;
font-size: 23px;
}
但是，其中有很多代码是相同的， 所以上边这种写法会增加很多工作量而且也不便于维护，所以一般我们也会这样写，代码如下：
.box1,.box2{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
}
.box1{
background-color: #8A2BE2;
font-size: 22px;
}
.box2{
background-color: blue;
font-size: 23px;
}
这样把重复的css代码拿出来，单独写一个样式表，然后将有相同样式的类添加到这个样式里就行，
但是后期如果再增加一个相同的div的时候就需要重新进入样式表添加类，如果是大型网站的话 这样也会降低我们的工作效率，所以我们这时候就需要利用OOCSS写法来降低维护难度及工作量。
写法很简单，只要将重复的样式拿出来单独写一个类，然后将类嵌入到HTML代码中就可以了，代码如下：
1)样式表代码
.box1{
background-color: #8A2BE2;
font-size: 22px;
}
.box2{
background-color: blue;
font-size: 23px;
}
.oocss1{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
}
2) HTML 代码（在类里边空格+重复样式类.OOCSS1就可以调用重复样式了）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试最小空间</title>
<link rel="stylesheet" href="测试最小空间.css">
</head>
<body>
<div class="box1 oocss1">Div1</div>
<div class="box2 oocss1">Div2</div>
</body>
</html>
后期我们继续增加相同的div，只要在Html代码中嵌入 oocss1类就可以了，不同的地方可以在类 box3中进行添加，代码及预览图如下
Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试最小空间</title>
<link rel="stylesheet" href="测试最小空间.css">
</head>
<body>
<div class="box1 oocss1">Div1</div>
<div class="box2 oocss1">Div2</div>
<div class="box3 oocss1">Div3</div>
</body>
</html>
css代码
.box1{
background-color: #8A2BE2;
font-size: 22px;
}
.box2{
background-color: blue;
font-size: 23px;
}
.box3{
background-color: deeppink;
font-size:25px
}
.oocss1{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
}
预览图
注意：
1）在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。
2）用OOCSS样式的时候，需要提前确定重复样式或者将重复样式尽量进行拆分，这样便于后续调用重复样式，否则有一个样式不同，就没法调用这个重复样式
3 OOCSS的优缺点
1 优点：
- css代码减少，降低工作量。
- 样式重复利用，代码简洁，便于维护。
- 代码少，加载速度快。
- 能轻松构造新的页面布局，或制作新的页面风格
2 缺点：
- 适用于大型网站项目（重复组件，样式多），小型项目优势不明显（代码少，可以直接利用第二种普通写法）。
- 需要熟练运用，因为特定要求（强调重复使用类选择器，避免使用id选择器）如果运用不得当，反而可能会造成后续维护困难，所以最好写上注释。