如何組織css，寫出高質(zhì)量的css代碼_html/css_WEB-ITnose

二：css框架
　　不能用“對”和“錯(cuò)”來評判，我們會(huì)用“好”、“比較好”、“很爛”、“非常棒”這樣的字眼來評判。
　　按功能劃分：控制字體的css集中在font.css文件里。
　　控制顏色的css集中在coloor.css文件里。
　　控制布局的css集中在layout.css文件里。
　　按區(qū)塊劃分：將頭部的css放在head.css中。
　　將底部放在foot.css中。
　　將側(cè)邊欄放在sidebar.css中。
　　將主體放在main.css中。

！！不同角度的組織方法都有自己的道理，也有自己的缺點(diǎn)和優(yōu)點(diǎn)。

筆者最喜歡的一種組織css的方法：base.css+common.css+page.css。
base（具有高度可移植性）
　?。╞ase是三者的最底層，提供CSS reset功能和粒度最小的通用類——元子類。這一層會(huì)被所有頁面引用，
是頁面樣式所需依賴的最底層。無論何種風(fēng)格的設(shè)計(jì)都可以引用它，所以base層要力求精簡和通用。
￥￥房子的地基。￥￥）
即按照智能分成：base、common、page。注意的是，這三者不是并列結(jié)構(gòu)，而是層疊結(jié)構(gòu)。
common（可移植性一般）
　?。╞ommon位于三者的中間，我們可以將頁面內(nèi)的元素拆分成一小塊一小塊功能和樣式相對獨(dú)立的小“模塊”，
這些“模塊”有些是會(huì)大量重復(fù)的，我們可以將大量重復(fù)的“模塊”視為一個(gè)組件。從頁面里盡可能
多的將組件提取出來，放在common層。網(wǎng)站中高度重用的模塊視為組件，放在common層。
￥￥房子的門窗。￥￥
一個(gè)網(wǎng)站只有一個(gè)common層。common層是放在一個(gè)common.css文件里，還是按照功能劃分放在
諸如common_form.css、common_imagelist.css的多個(gè)文件里，需要根據(jù)網(wǎng)站規(guī)模來
決定。）

page(幾乎無移植性)
　　（page位于三者最高層，提供頁面級的樣式。￥￥房間內(nèi)的裝飾畫。￥￥有page層的代碼放在一個(gè)page.css文件里
，根據(jù)頁面配上注釋，分塊書寫，便于維護(hù)。如：
/*首頁*/
.test1{}
.test2{}
/*關(guān)于我們*/
.test3{}
.test4{}
/*聯(lián)系我們*/
.test5{}
.test6{}
?。age.css還是應(yīng)當(dāng)越精簡越好，能用base層和common層的css解決的，就盡量不要用到page層。）

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com