物件導向css oocss

哈利的魔法棒發表於2018-12-07

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

     





相關文章