關於OOCSS架構

OOCSS是什麼

oocss是一個CSS框架，它的主要設計原則是：

1.分離struct和skin（官方用到skin這個詞，這裏的skin跟內容不太同樣。皮膚是用來extend基本的模塊的，若是不設置皮膚，頁面也能夠精確地顯示內容，而且內容有合理的位置和寬度和高度，可是沒有特定的圓角或者顏色），這一點在後面有詳細的說明

2.分離容器和內容（全部的包含了一個獨立塊的div均可以認爲是容器【或許html5裏面的Article元素能夠更準確地描述"容器"這個詞】，容器和內容分開，確保佈局不會由於內容的問題溢出或者錯亂。而且可維護性也很強。）

 

 

注：OOCSS其核心就是用最簡單的方式編寫最整潔，最於淨的CSS代碼，從而使代碼更具重用性，可維護性和可擴展性提升他的靈活性和可重用性。這個也是OOCSS最重要的一點。（1獨立的結構和樣式、二、獨立的容器和內容）

 

如何使用面向對象的CSS

如下幾點是建立OOCSS的關鍵部分

1         建立一個組件庫

2         獨立的容器和內容，而且避免樣式來依賴位置

3         獨立的結構和樣式

4         使用類名爲擴展基本對象

5         堅持以語義類來

 

 

OOCSS的優勢

1         減小CSS代碼

1         具備清潔的HTML標記，有語義的類名，邏輯性強的層次關係

2         語義標記，有助於SEO

3         更好的頁面優化，更快的加載時間（由於有不少組件重用）

4         可擴展的標記和CSS樣式，有更多的組件能夠放到庫中，而不影響其餘的組件

5         能輕鬆構造新的頁面佈局，或製做新的頁面風格

 

OOCSS的缺點

1         OOCSS適合真正的大型網站開發，由於大型網站用到的可重用性組件特別的多，若是運用在小型項目中可能見不到什麼成效。因此用不用OOCSS應該根據你的項目來決定。

2         若是沒用巧妙的使用，建立組件可能對於你來講是一堆沒用的東西，成爲一爛攤子，給你的維護帶來意想不到的杯具，說不定仍是個維護的噩夢。

3         最好給每個組件備寫一份說明文檔，有助於調用與維護