面向對象css oocss

一、概念

oocss：將頁面可重用元素抽象成一個類，用class加以描述，而對其餘對應的HTML便可當作是此類的一個實例

二、做用

   一、增強代碼複用以便方便維護

   二、減少css體積

   三、提高渲染效率

   四、組件庫思想、柵格佈局可共用、減小選擇器、方便拓展

三、注意事項

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

    二、結構和皮膚相分離

       <div class="container simpleExt"></div>

       container是控制結構class

       simpleExt是控制樣式class

   三、容器與內容相分離

    <div class="container"><ul class="rankList"><li>排行榜</li></ul></div>

    .container ul 依賴容器

    改爲。rankList.ul  解除與容器的依賴

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

  五、往你想要拓展的對象自己增長class,而不是他的父節點

  六、對象應保持獨立性

  七、避免使用ID選擇器，權重過高，沒法重用

  八、避免位置相關的樣式

  避免代用header、footer、nav等相關的樣式

  九、保證選擇器相同的權重：不利於升級

 十、類名 簡短 清晰 語義化 OOCSS的名字並不影響HTML語義化

四、代碼實戰

官網站：oocss.org

五、reset.css

六、normalize.css

七、Neat.css