一、OO? CSS 的概念解讀

（一）眾多開發者忽視了CSS的表現，認為其太過簡單，是一種機械的工作，而把更多關注在JS的性能或者其他方面。

（二）OO CSS 將頁面可重用元素抽象成一個類，用class 加以描述，而與其對應的html 即可看成是此類的一個實例。

?

二、OO CSS 的作用

（一）加強代碼復用以便方面維護。

（二）減少 CSS 體積（用父類的即可）。

（三）提升渲染效率。

（四）組件庫思想、柵格布局可共同、減少選擇器、方面擴展。

?

三、OO CSS 的注意事項（使用高效CSS時需要注意的問題）

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

.mod .inner {...} // .mod 下面的 inner .inner {...} // 不是很建議的聲明

（二）結構與皮膚相分離。

<div class="container simpleExt"></div> //html 結構.container {...} //控制結構的class.simpleExt {...} //控制皮膚的class

（三）容器與內容相分離。

<div class="container"><ul><li>排行</li></ul></div> //html 結構.container ul{...} //ul依賴了容器 <div class="container"><ul class="rankList"><li>排行</li></ul></div> //html 結構.rankList ul{...} //解除與容器的依賴，可以從一個容器轉移到其他容器

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

（五）往你想要擴展的對象本身增加 class 而不是其父節點。

（六）對象應該保持獨立性

<div class="container"><div class="mod"></div></div> //html 結構.container {...} .container .mod {...} //控制結構的class//應該寫成如下：<div class="container mod"> </div> //html 結構

（七）避免使用ID選擇器，權重太高，無法重用。

（八）避免位置相關的樣式

#header .container {...}#footer .container {...} //可直接寫成 .container {...}#header h1 {...}#footer h1 {...}h1,.h1 { }h2,.h2 { }<h1 class="h6"></h1>

（九）保證選擇器相同的權重

（八）類名應該剪短、清晰、語義化，OO CSS 的名字并不影響html 語義化

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。