1、概念
oocss:將頁面可重用元素抽象成一個類,用class加以描述,而對其他對應的HTML即可看成是此類的一個例項
2、作用
1、加強程式碼複用以便方便維護
2、減小css體積
3、提升渲染效率
4、元件庫思想、柵格佈局可共用、減少選擇器、方便擴充
3、注意事項
1、不要直接定義子節點,應把共性宣告放到父類
2、結構和皮膚相分離
<div class="container simpleExt"></div>
container是控制結構class
simpleExt是控制樣式class
3、容器與內容相分離
<div class="container"><ul class="rankList"><li>排行榜</li></ul></div>
.container ul 依賴容器
改成。rankList.ul 解除與容器的依賴
4、抽象出可重用的元素,建好元件庫,在元件庫內尋找可用的元素組裝頁面
5、往你想要擴充的物件本身增加class,而不是他的父節點
6、物件應保持獨立性
7、避免使用ID選擇器,權重太高,無法重用
8、避免位置相關的樣式
避免代用header、footer、nav等相關的樣式
9、保證選擇器相同的權重:不利於升級
10、類名 簡短 清晰 語義化 OOCSS的名字並不影響HTML語義化
4、程式碼實戰
官網站:oocss.org
5、reset.css
6、normalize.css
7、Neat.css