CSS模塊化思想 有效管理CSS樣式_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
關(guān)于模塊CSS的劃分,我比較喜歡類似wordpress中的css劃分方式,一般情況下通過類似下列結(jié)構(gòu)劃分:
在剛學(xué)習(xí)CSS初期,就接觸了"模塊化CSS"這樣的概念,不過,一直沒有很好的理解。說起來,理由很簡(jiǎn)單:因?yàn)閹缀跛械拇a都是為了博客的設(shè)計(jì),而像博客這么小的架構(gòu),CSS文件根本不用多,因?yàn)楸旧泶a量就小,使用不同表現(xiàn)形式的頁面模板并不多,少反而更方便管理。所以,對(duì)于模塊化CSS的理解很亂,直接導(dǎo)致自己一直認(rèn)為下面的分法是非常合理的:
其實(shí)不然,最近工作,接觸了公司的網(wǎng)站,leader要自己寫CSS的寫作規(guī)范,以及一些HTML的統(tǒng)一規(guī)范;并且寫了新的頻道/頁面/賣場(chǎng)。才發(fā)現(xiàn),原來,上面的分法還是太理想化了。以個(gè)人來說,個(gè)人認(rèn)為可以用下面的分割法。先寫下,然后,讓我們對(duì)比這兩種分法,找到更好的解決CSS文件管理的合適的CSS模塊化分法:
我們可以看到,不同的有三個(gè)CSS文件。第一種分法是種不錯(cuò)的做法,但管理起來比較麻煩,雖然是"模塊化" 了,把表現(xiàn)的內(nèi)容的樣式分開。但由于每個(gè)人都不可能百分百了解每個(gè)CSS文件里面的內(nèi)容,所以,可能導(dǎo)致下面的問題:
一、效率問題與最終目的
在網(wǎng)站內(nèi)容上面,如果改某一個(gè)區(qū)域的內(nèi)容,可能要幾個(gè)CSS都改。這樣一來,本來簡(jiǎn)單的一個(gè)修改,開始變得復(fù)雜起來。并且,如果多個(gè)都改,可能會(huì)使我們忽略了某些東西,又需要進(jìn)一步調(diào)試,這樣不僅肯使最終目的實(shí)現(xiàn)延后,還是一個(gè)效率的問題。
二、調(diào)用盡可能少的CSS文件
大多樓情況下,一個(gè)網(wǎng)站都是分成頭部,中部和底部,并且,一般,要做新的頻道/頁面之類的東西,都不會(huì)變動(dòng)頭部和底部,而只是變動(dòng)中間部分。這樣一來,所有CSS文件都要調(diào)用,因?yàn)椋琀TML和CSS的模塊化并不一致。這樣,就會(huì)導(dǎo)致服務(wù)器承受更多的壓力。這是一個(gè)方面。另一個(gè)方面是,如果新頁面中某些元素與其他頁面有沖突,我們可能要搞一大堆關(guān)于優(yōu)先性選擇的代碼,增加代碼量。這些都不是我們想要的。這就為什么要把header.css和footer.css分開來的原因。
三、多人合作上的問題
如果我們多個(gè)人在工作,大家的分工可能是,有人完成頭部的導(dǎo)航,有人完成底部的搜索條,有人完成中部新頁面的構(gòu)建。這樣一來,大家都同時(shí)在改幾個(gè)文件,并且,改的東西不同。如果要更新到服務(wù)器,就要先對(duì)比,再更新。(當(dāng)然,現(xiàn)在有版本管理這樣的軟件。但是,同時(shí)工作的話,版本也是一個(gè)問題,要相信,或許更新永遠(yuǎn)都改不上改變。)
結(jié)語:
當(dāng)然,上面的分法,只是一個(gè)簡(jiǎn)單的模型。不同網(wǎng)站的架構(gòu),可能需要更細(xì)化的分法。這里需要提醒的一點(diǎn)是,模塊化CSS,我們應(yīng)該時(shí)刻明確,我們是為了方便管理,方便修改,方便多人合作,而不是簡(jiǎn)單的分割。如果說有什么建議,我想,CSS的模塊化,應(yīng)該盡量與HTML的模塊化相一致。這里的一致說的是,無論是在文件的分割上,還是在CSS內(nèi)容的分割上,與HTML的模塊化一致。這將會(huì)更有利于我們的工作。
而你,又是怎么想的呢?
示例代碼 [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 /* 表單類樣式 */
在剛學(xué)習(xí)CSS初期,就接觸了"模塊化CSS"這樣的概念,不過,一直沒有很好的理解。說起來,理由很簡(jiǎn)單:因?yàn)閹缀跛械拇a都是為了博客的設(shè)計(jì),而像博客這么小的架構(gòu),CSS文件根本不用多,因?yàn)楸旧泶a量就小,使用不同表現(xiàn)形式的頁面模板并不多,少反而更方便管理。所以,對(duì)于模塊化CSS的理解很亂,直接導(dǎo)致自己一直認(rèn)為下面的分法是非常合理的:
示例代碼 [m.dounai2.com]
reset.css // 對(duì)瀏覽器的默認(rèn)樣式進(jìn)行重設(shè)
layout.css // 管理頁面的布局
typeset.css // 圖文的編排與
color.css // 統(tǒng)一管理顏色的搭配
print.css // 打印效果樣式
ie.css // 把對(duì)ie的hack單獨(dú)分開
layout.css // 管理頁面的布局
typeset.css // 圖文的編排與
color.css // 統(tǒng)一管理顏色的搭配
print.css // 打印效果樣式
ie.css // 把對(duì)ie的hack單獨(dú)分開
其實(shí)不然,最近工作,接觸了公司的網(wǎng)站,leader要自己寫CSS的寫作規(guī)范,以及一些HTML的統(tǒng)一規(guī)范;并且寫了新的頻道/頁面/賣場(chǎng)。才發(fā)現(xiàn),原來,上面的分法還是太理想化了。以個(gè)人來說,個(gè)人認(rèn)為可以用下面的分割法。先寫下,然后,讓我們對(duì)比這兩種分法,找到更好的解決CSS文件管理的合適的CSS模塊化分法:
示例代碼 [m.dounai2.com]
reset.css
header.css // 頭部的所有樣式
container.css // 除頭部/底部外的中間區(qū)域樣式
footer.css // 底部樣式
print.css
ie.css
header.css // 頭部的所有樣式
container.css // 除頭部/底部外的中間區(qū)域樣式
footer.css // 底部樣式
print.css
ie.css
我們可以看到,不同的有三個(gè)CSS文件。第一種分法是種不錯(cuò)的做法,但管理起來比較麻煩,雖然是"模塊化" 了,把表現(xiàn)的內(nèi)容的樣式分開。但由于每個(gè)人都不可能百分百了解每個(gè)CSS文件里面的內(nèi)容,所以,可能導(dǎo)致下面的問題:
一、效率問題與最終目的
在網(wǎng)站內(nèi)容上面,如果改某一個(gè)區(qū)域的內(nèi)容,可能要幾個(gè)CSS都改。這樣一來,本來簡(jiǎn)單的一個(gè)修改,開始變得復(fù)雜起來。并且,如果多個(gè)都改,可能會(huì)使我們忽略了某些東西,又需要進(jìn)一步調(diào)試,這樣不僅肯使最終目的實(shí)現(xiàn)延后,還是一個(gè)效率的問題。
二、調(diào)用盡可能少的CSS文件
大多樓情況下,一個(gè)網(wǎng)站都是分成頭部,中部和底部,并且,一般,要做新的頻道/頁面之類的東西,都不會(huì)變動(dòng)頭部和底部,而只是變動(dòng)中間部分。這樣一來,所有CSS文件都要調(diào)用,因?yàn)椋琀TML和CSS的模塊化并不一致。這樣,就會(huì)導(dǎo)致服務(wù)器承受更多的壓力。這是一個(gè)方面。另一個(gè)方面是,如果新頁面中某些元素與其他頁面有沖突,我們可能要搞一大堆關(guān)于優(yōu)先性選擇的代碼,增加代碼量。這些都不是我們想要的。這就為什么要把header.css和footer.css分開來的原因。
三、多人合作上的問題
如果我們多個(gè)人在工作,大家的分工可能是,有人完成頭部的導(dǎo)航,有人完成底部的搜索條,有人完成中部新頁面的構(gòu)建。這樣一來,大家都同時(shí)在改幾個(gè)文件,并且,改的東西不同。如果要更新到服務(wù)器,就要先對(duì)比,再更新。(當(dāng)然,現(xiàn)在有版本管理這樣的軟件。但是,同時(shí)工作的話,版本也是一個(gè)問題,要相信,或許更新永遠(yuǎn)都改不上改變。)
結(jié)語:
當(dāng)然,上面的分法,只是一個(gè)簡(jiǎn)單的模型。不同網(wǎng)站的架構(gòu),可能需要更細(xì)化的分法。這里需要提醒的一點(diǎn)是,模塊化CSS,我們應(yīng)該時(shí)刻明確,我們是為了方便管理,方便修改,方便多人合作,而不是簡(jiǎn)單的分割。如果說有什么建議,我想,CSS的模塊化,應(yīng)該盡量與HTML的模塊化相一致。這里的一致說的是,無論是在文件的分割上,還是在CSS內(nèi)容的分割上,與HTML的模塊化一致。這將會(huì)更有利于我們的工作。
而你,又是怎么想的呢?
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- CSS布局實(shí)例:僅一張圖片實(shí)現(xiàn)圓角!
- DIVCSS菜單:縱向CSS菜單實(shí)例之橙色記憶
- 如何用CSS實(shí)現(xiàn)翻頁效果?
- CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!
- CSS布局實(shí)例:CSS標(biāo)簽切換代碼實(shí)例教程
- CSS圓角邊框純CSS制作
- 10個(gè)很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計(jì)展示
- CSS實(shí)例教程:紅藍(lán)炫CSS橫向菜單
- CSS背景圖片background-image須注意路徑問題!
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS模塊化思想 有效管理CSS樣式。