欧美日韩精品在线,国内精品久久久久久久久,一级毛片恃级毛片直播,清纯唯美亚洲综合欧美色

CSS模塊化思想 有效管理CSS樣式_Div+CSS教程

編輯Tag賺U幣
教程Tag:暫無Tag,歡迎添加,賺取U幣!
  關(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 /* 表單類樣式 */

  在剛學(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ú)分開

  其實(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

  我們可以看到,不同的有三個(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ì)更有利于我們的工作。

  而你,又是怎么想的呢?

來源:52CSS//所屬分類:Div+CSS教程/更新時(shí)間:2012-08-06
相關(guān)Div+CSS教程