CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)_Web標(biāo)準(zhǔn)教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
徹底放棄表格布局,使用xhtml CSS建站也已經(jīng)有一年多了。一年多的實(shí)踐也積累了一定的經(jīng)驗(yàn),現(xiàn)在寫這篇文章來總結(jié)一下。在使用xhtml CSS建站的過程中有一個(gè)比較要害的問題:網(wǎng)站的CSS樣式表規(guī)劃與治理。
我的CSS治理進(jìn)化史
在最初使用CSS來控制網(wǎng)站樣式的時(shí)候,并不清楚CSS治理規(guī)劃之類的東西,所寫的CSS基本上都是按照需要,隨時(shí)添加,剛開始還不覺得有什么不好,但是后來越加越多,越改越亂,雖然有一些注釋,但到最后還是變得讓我自己看著都頭疼。那個(gè)時(shí)候,一個(gè)網(wǎng)站所有的CSS都在一個(gè)文件中,沒有規(guī)劃,并且排序也沒多少規(guī)律,于是只能在html頁面中找到class的名稱,然后在上千行的css代碼中搜索自己想要的那個(gè)。
過了一段時(shí)間,思考總結(jié)之后,我對站點(diǎn)的CSS樣式表進(jìn)行了初級(jí)的規(guī)劃。在樣式表中初步劃分了三個(gè)區(qū)域:
其中“base 樣式表”用來描述一些公共性的東西,比如全局性的body、a樣式等;“l(fā)ayout 樣式表”用來描述具有唯一性的id布局,屬于整個(gè)頁面的框架式布局;“class 樣式表”用來描述剩下的class類的樣式,這類樣式分為可復(fù)用樣式和通常只在非凡頁面出現(xiàn)一次或幾次的樣式。
按照這種方法布局的確提高了不少的效率,但這種方式只適合中小型網(wǎng)站,在大型網(wǎng)站上應(yīng)用還是略顯單薄,至少在多人協(xié)作的時(shí)候并不能達(dá)到最佳效率。于是就有了下面總結(jié)的較完善的CSS治理規(guī)劃模式。
較完善的CSS樣式表治理模式
step1:個(gè)人或者團(tuán)隊(duì)需要將主要頁面的布局用DIV圖的模式按層次畫出來,這個(gè)DIV圖就是在設(shè)計(jì)原型的基礎(chǔ)上,將頁面中的主要模塊使用的ID名、class名標(biāo)注出來,方便建立維護(hù)文檔以便將來進(jìn)行修改與升級(jí)。
step2:劃分CSS結(jié)構(gòu),建立全局css及各模塊css。在html頁面中引用全局css,在全局css中引用各模塊css。
關(guān)于模塊CSS的劃分,我比較喜歡類似wordpress中的css劃分方式,一般情況下通過類似下列結(jié)構(gòu)劃分:
解釋一下,layout.css負(fù)責(zé)整個(gè)網(wǎng)站的布局,比如#header, #footer等布局的基本位置及樣式設(shè)計(jì);public.css負(fù)責(zé)一些公用樣式定義,因?yàn)橐粋(gè)class中可以使用class=”navbar font12px”這種利用中間空格分隔的方法來應(yīng)用多個(gè)class樣式,所以可以定義一些比較常用的或者在非凡情況下需要修改的公用class,方便局部微調(diào);header.css、sidebar.css、footer.css等模塊是對應(yīng)頭部、側(cè)邊欄、底部模塊的css樣式表,可以根據(jù)網(wǎng)站的具體需求來增減模塊;index.css是一些首頁特有元素的css,因?yàn)槭醉摰姆欠残裕覀冊谠O(shè)計(jì)css的時(shí)候通常對首頁進(jìn)行非凡處理,一般情況下,首頁是css最復(fù)雜的一個(gè)頁面,有必要對首頁的獨(dú)有css元素進(jìn)行歸類放置,也可以不用@import引入index.css,而把它單獨(dú)放到首頁引用;form.css是表單元素的樣式表,表單雖然不難,但控制起來還是比較麻煩的,單獨(dú)放到一個(gè)css文件里方便控制,當(dāng)然,類似的其他元素你也可以這么處理。
step3:在各個(gè)樣式表文件中寫入樣式。
我的CSS治理進(jìn)化史
在最初使用CSS來控制網(wǎng)站樣式的時(shí)候,并不清楚CSS治理規(guī)劃之類的東西,所寫的CSS基本上都是按照需要,隨時(shí)添加,剛開始還不覺得有什么不好,但是后來越加越多,越改越亂,雖然有一些注釋,但到最后還是變得讓我自己看著都頭疼。那個(gè)時(shí)候,一個(gè)網(wǎng)站所有的CSS都在一個(gè)文件中,沒有規(guī)劃,并且排序也沒多少規(guī)律,于是只能在html頁面中找到class的名稱,然后在上千行的css代碼中搜索自己想要的那個(gè)。
過了一段時(shí)間,思考總結(jié)之后,我對站點(diǎn)的CSS樣式表進(jìn)行了初級(jí)的規(guī)劃。在樣式表中初步劃分了三個(gè)區(qū)域:
示例代碼 [m.dounai2.com]
base 樣式表
layout 樣式表
class 樣式表
layout 樣式表
class 樣式表
其中“base 樣式表”用來描述一些公共性的東西,比如全局性的body、a樣式等;“l(fā)ayout 樣式表”用來描述具有唯一性的id布局,屬于整個(gè)頁面的框架式布局;“class 樣式表”用來描述剩下的class類的樣式,這類樣式分為可復(fù)用樣式和通常只在非凡頁面出現(xiàn)一次或幾次的樣式。
按照這種方法布局的確提高了不少的效率,但這種方式只適合中小型網(wǎng)站,在大型網(wǎng)站上應(yīng)用還是略顯單薄,至少在多人協(xié)作的時(shí)候并不能達(dá)到最佳效率。于是就有了下面總結(jié)的較完善的CSS治理規(guī)劃模式。
較完善的CSS樣式表治理模式
step1:個(gè)人或者團(tuán)隊(duì)需要將主要頁面的布局用DIV圖的模式按層次畫出來,這個(gè)DIV圖就是在設(shè)計(jì)原型的基礎(chǔ)上,將頁面中的主要模塊使用的ID名、class名標(biāo)注出來,方便建立維護(hù)文檔以便將來進(jìn)行修改與升級(jí)。
step2:劃分CSS結(jié)構(gòu),建立全局css及各模塊css。在html頁面中引用全局css,在全局css中引用各模塊css。
示例代碼 [m.dounai2.com]
建立global.css為全局css,在全局css中定義“* { … } body { … }”之類的全局樣式。
在全局樣式中通過“@import url(”xxx.css”);”引入模塊css。
在全局樣式中通過“@import url(”xxx.css”);”引入模塊css。
關(guān)于模塊CSS的劃分,我比較喜歡類似wordpress中的css劃分方式,一般情況下通過類似下列結(jié)構(gòu)劃分:
示例代碼 [m.dounai2.com]
layout.css /* 整站布局 */
public.css /* 公用組合樣式 */
header.css /* 頁面頭部區(qū)域樣式 */
sidebar.css /* 側(cè)邊欄區(qū)域樣式 */
main.css /* 主體區(qū)域樣式 */
footer.css /* 底部區(qū)域樣式 */
index.css /* 首頁區(qū)域特有樣式 */
form.css /* 表單類樣式 */
public.css /* 公用組合樣式 */
header.css /* 頁面頭部區(qū)域樣式 */
sidebar.css /* 側(cè)邊欄區(qū)域樣式 */
main.css /* 主體區(qū)域樣式 */
footer.css /* 底部區(qū)域樣式 */
index.css /* 首頁區(qū)域特有樣式 */
form.css /* 表單類樣式 */
解釋一下,layout.css負(fù)責(zé)整個(gè)網(wǎng)站的布局,比如#header, #footer等布局的基本位置及樣式設(shè)計(jì);public.css負(fù)責(zé)一些公用樣式定義,因?yàn)橐粋(gè)class中可以使用class=”navbar font12px”這種利用中間空格分隔的方法來應(yīng)用多個(gè)class樣式,所以可以定義一些比較常用的或者在非凡情況下需要修改的公用class,方便局部微調(diào);header.css、sidebar.css、footer.css等模塊是對應(yīng)頭部、側(cè)邊欄、底部模塊的css樣式表,可以根據(jù)網(wǎng)站的具體需求來增減模塊;index.css是一些首頁特有元素的css,因?yàn)槭醉摰姆欠残裕覀冊谠O(shè)計(jì)css的時(shí)候通常對首頁進(jìn)行非凡處理,一般情況下,首頁是css最復(fù)雜的一個(gè)頁面,有必要對首頁的獨(dú)有css元素進(jìn)行歸類放置,也可以不用@import引入index.css,而把它單獨(dú)放到首頁引用;form.css是表單元素的樣式表,表單雖然不難,但控制起來還是比較麻煩的,單獨(dú)放到一個(gè)css文件里方便控制,當(dāng)然,類似的其他元素你也可以這么處理。
step3:在各個(gè)樣式表文件中寫入樣式。
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- CSS布局 聲明文檔類型描述(DTD)
- WEB2.0標(biāo)準(zhǔn)教程:第十一天 不用表格的菜單
- XHTML CSS網(wǎng)站開發(fā)及Web標(biāo)準(zhǔn)的優(yōu)勢和問題淺析
- 非常實(shí)用的技巧:網(wǎng)頁制作的妙招四則
- 有關(guān)web標(biāo)準(zhǔn)化的一些想法
- 符合WEB標(biāo)準(zhǔn)的表單效果
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- WEB標(biāo)準(zhǔn)教程第7天:CSS入門
- WEB標(biāo)準(zhǔn)教程第4天:調(diào)用樣式表
- web標(biāo)準(zhǔn)化設(shè)計(jì):常用的CSS命名規(guī)則
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)。