CSS OOCSS簡單介紹

antzone發表於2017-04-06

OOCSS是(Object Oriented CSS),顧名思義就是物件導向的CSS。

OOCSS主要有兩個原則:

(1).結構和樣式分離:

比如一個頁面存在著多個不同功能的按鈕,這些按鈕的形狀大小都差不多,但是根據不同的功能會有不同的顏色或背景來加以區分。如果不進行結構和樣式分離,我們的CSS程式碼可能是這樣的:

[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;
}

這兩個或者可能更多的按鈕擁有一些不同的樣式,但是它們同時擁有相同的大小樣式等,將其抽象的部分提取出來,如下:

[CSS] 純文字檢視 複製程式碼
.btn{
    width:100px;
    height:50px;
    padding:5px 3px;
}
.primary{
    background:red;
    color:#fff;
}
.delete{
    background:red;
    color:#fff;
}

這樣提取公用的樣式出來,然後按鈕同時引用btn和primary等。這種做法除了減少重複的程式碼精簡CSS之外,還有一個好處是複用性,如果需要增加其他額外的按鈕,只需要編寫不同的樣式,和btn配合使用即可。

(2)容器和內容分離:

我們平時寫程式碼一定寫過這樣程式碼

[CSS] 純文字檢視 複製程式碼
.content h3{
  font-size:20px;
  color:#333;
}

這樣的程式碼就是內容依賴於容器,沒有分離的程式碼,也就是說h3的樣式依賴於.content容器,如果其他地方要用到相同的樣式,但是它的容器卻不是.content,那你可能就是要再寫一遍.something h3。

所以OOCSS推薦分離容器和內容,可以修改成:

[CSS] 純文字檢視 複製程式碼
.title{
  font-size:20px;
  color:#333;
}

關於這一點,個人建議要分情況來看,像前面這個例子,它適合樣式和容器分離。但是比如下面這種情況:

[CSS] 純文字檢視 複製程式碼
.menu li{
  font-size:12px;
}

這種ul,li列表的樣式,我覺的就按照我們原先的做法就可以,不一定非得給一個類給li來設定樣式,如下:

[CSS] 純文字檢視 複製程式碼
.menu-item{
  font-size:12px;
}

這樣頁面的li標籤需要引用menu-item類。

相關文章