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選擇器）如果運用不得當，反而可能會造成后續維護困難，所以最好寫上注釋。