CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
生活随笔
收集整理的這篇文章主要介紹了
CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、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)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Oracle hang 之sqlplus
- 下一篇: 切图崽的自我修养-规范CSS元素命名