OOCSS是什麼，該如何用？
阿新 • • 發佈：2020-09-22
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
但是，其中有很多程式碼是相同的， 所以上邊這種寫法會增加很多工作量而且也不便於維護，所以一般我們也會這樣寫，程式碼如下
.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選擇器）如果運用不得當，反而可能會造成後續維護困難，所以最好寫上註釋。