OO CSS的我的理解

　　這兩天的學習，學到了OO CSS的部分，說實話，我仍是有些不太懂得的。做爲學習筆記記錄下來如今的個人想法（若有錯誤還望能夠給予我指正）和學習到的知識（OO CSS的概念解讀），往後可能學習的更多我會有更新的理解。

 

　　先討論一下問題產生的背景。CSS代碼遇到的問題？

　　　　1.須要書寫大量看似無邏輯的代碼，不方便維護及拓展；

　　　　2.可重用性差，面對不一樣的CSS名稱，不清楚到底被哪些模塊引用到了，也不敢修改和刪除，後面的樣式只能往上面堆積；

　　　　3.怕重名，怕修改錯，胡亂堆積，致使CSS愈來愈大；

 

　　這時候就須要面向對象的CSS（OO CSS）來管理咱們的樣式。OO CSS將頁面可重用元素抽象成一個類，用class加以描述，而與其對應的HTML便可當作是此類的一個實例。在面向對象編程中，每個類都有一個實例。而在HTML和CSS相互配合中，當一個HTML能夠應用上一個class時，當前的這個元素就是這個類的實例。當咱們建一個父類的class，好比在其中設置「color:red」，此時咱們想重寫這個父類，咱們就能夠在其中繼續重寫，並且其中的每個具體的類均可以向上對應一個抽象的類。並且OO CSS也具備封裝、繼承、多態這樣的特性。可是咱們也沒有什麼必要強制的將面向對象的css 和麪向對象編程的各類特色扣在一塊兒，最主要的是要體會OO CSS中的類，咱們能夠複用類還能夠重寫類。由此也引出了OO CSS的一個應用範圍，當項目很小的使用，用不用OO CSS影響都不是很大，由於自己去維護這些CSS的成本就不大。可是當遇到大型項目的時候，就須要有總體的概念，而且也方便其餘的開發人員經過父類去修改、添加。隨着CSS的發展，CSS3的應用，以及CSS對大部分瀏覽器的支持。如今的CSS，也擁有了前置處理器（用來很好的編寫樣式）和後置處理器（完善不一樣瀏覽器所實現的前綴）。

 

　　接下來咱們討論一下OO CSS的做用和注意事項

　　做用：

　　1.增強代碼複用以方便維護。

　　2.減少CSS體積（由於他有父類，父類替咱們作了不少無需重複的勞動，這時，該父類下面的子類就不要重寫在父類中已經有的方法。）

　　3.提高渲染效率（父類先渲染總體輪廓，在讓在其中的子類逐層進行內部渲染）

　　4.組件庫思想（創建大型項目需具有：創建一個總體項目公用的大型的父類，這個父類裏面有全部的公用的東西）柵格佈局可公用，減小選擇器，方便擴展。

　　注意事項：

　　1.不要直接定義子節點，應把共性聲明放到父類。

代碼示例：

.mod .inner{......}   //聲明.mod下面的inner，在mod中作了不少公用操做
.inner{......} //不建議直接聲明.inner，由於不可重用。

　　2.結構與皮膚相分離。

代碼示例：

<div>class="container simpleExt"></div>//html結構，外面是container（容器），裏面是simpleExt（皮膚）。不該該把全部的都寫在一塊兒。應該各司其職。
.container
{......}    //控制結構的class
.simpleExt
{......}    //控制皮膚的class
		

　　3.容器與內容相分離。

代碼示例：

<div class="container"><ul><li>排行</li></ul></div>    //html結構
.container ul{......}    //ul依賴了容器

<div class="container"><ul class="rankList"><li>排行</li></ul></div>
.rankList ul{......}    //解除與容器的依賴，能夠從一個容器轉移到其餘容器

　　4.抽象出可重用的元素，建好組件庫，在組件庫內尋找可用的元素組裝頁面。

　　5.往你想要擴展的對象自己增長class，而不是他的父節點。（由於父節點自有它公用的特性，並非專用於任何一個，它是針對全局）

　　6.對象應該保留獨立性。

代碼示例：

<div class="container"><div class="mod"></div></div>    //html結構
.container {......} .container .mod {......}    //控制結構的css
與其寫這個之上的兩個結構，不如結合成一個結構來寫。
<div class="container mod"></div>   

　　7.避免使用ID選擇器，權重過高，沒法重用。（ID選擇器主要針對JS使用）

　　8.避免位置相關的樣式。

代碼示例：

#header .container{......}, #footer .container{......}    //當header和footer裏面都有container並且兩個都有相同的共性，則把他們提出來成爲一個（以下）
.container{}

#header h1{......}, #footer h1{......}    //當header和footer中的h1要不同的時候，能夠寫成以下
h1,.h1{}  h2,.h2{}  <h1><class="h6"</h1>    //寫成h1和.h1這樣一直寫到h6，分別定義成不同的，而後再把h1中設一個class，這時這個h1就長h6的樣子了。

　　9.保證選擇器相同的權重。（選擇器權重很差協調，不方便升級）

　　10.類名 簡短 清晰 語義化OOCSS的名並不影響HTML語義化。

 

最後要說，對一個新知識最好的理解，就是去實踐它！