!如何組織css
一:css的API
屬於基礎部分,這部分的能力用“對”和“錯”來評判。
比如說把文字設置為紅色,只能用color:red;這種寫法是對的,其他任何寫法都是錯的。
二:css框架
不能用“對”和“錯”來評判,我們會用“好”、“比較好”、“很爛”、“非常棒”這樣的字眼來評判。
按功能划分:控制字體的css集中在font.css文件里。
控制顏色的css集中在coloor.css文件里。
控制布局的css集中在layout.css文件里。
按區塊划分:將頭部的css放在head.css中。
將底部放在foot.css中。
將側邊欄放在sidebar.css中。
將主體放在main.css中。
!!不同角度的組織方法都有自己的道理,也有自己的缺點和優點。
筆者最喜歡的一種組織css的方法:base.css+common.css+page.css。
base(具有高度可移植性)
(base是三者的最底層,提供CSS reset功能和粒度最小的通用類——元子類。這一層會被所有頁面引用,
是頁面樣式所需依賴的最底層。無論何種風格的設計都可以引用它,所以base層要力求精簡和通用。
¥¥房子的地基。¥¥)
即按照智能分成:base、common、page。注意的是,這三者不是並列結構,而是層疊結構。
common(可移植性一般)
(bommon位於三者的中間,我們可以將頁面內的元素拆分成一小塊一小塊功能和樣式相對獨立的小“模塊”,
這些“模塊”有些是會大量重復的,我們可以將大量重復的“模塊”視為一個組件。從頁面里盡可能
多的將組件提取出來,放在common層。網站中高度重用的模塊視為組件,放在common層。
¥¥房子的門窗。¥¥
一個網站只有一個common層。common層是放在一個common.css文件里,還是按照功能划分放在
諸如common_form.css、common_imagelist.css的多個文件里,需要根據網站規模來
決定。)
page(幾乎無移植性)
(page位於三者最高層,提供頁面級的樣式。¥¥房間內的裝飾畫。¥¥有page層的代碼放在一個page.css文件里
,根據頁面配上注釋,分塊書寫,便於維護。如:
/*首頁*/
.test1{}
.test2{}
/*關於我們*/
.test3{}
.test4{}
/*聯系我們*/
.test5{}
.test6{}
!!page.css還是應當越精簡越好,能用base層和common層的css解決的,就盡量不要用到page層。)