|
|
在剛學(xué)習(xí)CSS初期，就接觸了"模塊化CSS"這樣的概念，不過(guò)，一直沒(méi)有很好的理解。說(shuō)起來(lái)，理由很簡(jiǎn)單：因?yàn)閹缀跛械拇a都是為了博客的設(shè)計(jì)，而像博客這么小的架構(gòu)，CSS文件根本不用多，因?yàn)楸旧泶a量就小，使用不同表現(xiàn)形式的頁(yè)面模板并不多，少反而更方便管理。所以，對(duì)于模塊化CSS的理解很亂，直接導(dǎo)致自己一直認(rèn)為下面的分法是非常合理的：
- reset.css //對(duì)瀏覽器的默認(rèn)樣式進(jìn)行重設(shè)
- layout.css //管理頁(yè)面的布局
- typeset.css //圖文的編排與
- color.css //統(tǒng)一管理顏色的搭配
- print.css //打印效果樣式
- ie.css //把對(duì)ie的hack單獨(dú)分開(kāi)
其實(shí)不然，最近工作，接觸了公司的網(wǎng)站，leader要自己寫CSS的寫作規(guī)范，以及一些HTML的統(tǒng)一規(guī)范；并且寫了新的頻道/頁(yè)面/賣場(chǎng)。才發(fā)現(xiàn)，原來(lái)，上面的分法還是太理想化了。以個(gè)人來(lái)說(shuō)，個(gè)人認(rèn)為可以用下面的分割法。先寫下，然后，讓我們對(duì)比這兩種分法，找到更好的解決CSS文件管理的合適的CSS模塊化分法：
- reset.css
- header.css //頭部的所有樣式
- container.css //除頭部/底部外的中間區(qū)域樣式
- footer.css //底部樣式
- print.css
- ie.css
我們可以看到，不同的有三個(gè)CSS文件。第一種分法是種不錯(cuò)的做法，但管理起來(lái)比較麻煩，雖然是"模塊化"了，把表現(xiàn)的內(nèi)容的樣式分開(kāi)。但由于每個(gè)人都不可能百分百了解每個(gè)CSS文件里面的內(nèi)容，所以，可能導(dǎo)致下面的問(wèn)題：
一、效率問(wèn)題與最終目的
在網(wǎng)站內(nèi)容上面，如果改某一個(gè)區(qū)域的內(nèi)容，可能要幾個(gè)CSS都改。這樣一來(lái)，本來(lái)簡(jiǎn)單的一個(gè)修改，開(kāi)始變得復(fù)雜起來(lái)。并且，如果多個(gè)都改，可能會(huì)使我們忽略了某些東西，又需要進(jìn)一步調(diào)試，這樣不僅肯使最終目的實(shí)現(xiàn)延后，還是一個(gè)效率的問(wèn)題。
二、調(diào)用盡可能少的CSS文件
大多樓情況下，一個(gè)網(wǎng)站都是分成頭部，中部和底部，并且，一般，要做新的頻道/頁(yè)面之類的東西，都不會(huì)變動(dòng)頭部和底部，而只是變動(dòng)中間部分。這樣一來(lái)，所有CSS文件都要調(diào)用，因?yàn)椋琀TML和CSS的模塊化并不一致。這樣，就會(huì)導(dǎo)致服務(wù)器承受更多的壓力。這是一個(gè)方面。另一個(gè)方面是，如果新頁(yè)面中某些元素與其他頁(yè)面有沖突，我們可能要搞一大堆關(guān)于優(yōu)先性選擇的代碼，增加代碼量。這些都不是我們想要的。這就為什么要把header.css和footer.css分開(kāi)來(lái)的原因。
三、多人合作上的問(wèn)題
如果我們多個(gè)人在工作，大家的分工可能是，有人完成頭部的導(dǎo)航，有人完成底部的搜索條，有人完成中部新頁(yè)面的構(gòu)建。這樣一來(lái)，大家都同時(shí)在改幾個(gè)文件，并且，改的東西不同。如果要更新到服務(wù)器，就要先對(duì)比，再更新。（當(dāng)然，現(xiàn)在有版本管理這樣的軟件。但是，同時(shí)工作的話，版本也是一個(gè)問(wèn)題，要相信，或許更新永遠(yuǎn)都改不上改變。）
結(jié)語(yǔ)：
當(dāng)然，上面的分法，只是一個(gè)簡(jiǎn)單的模型。不同網(wǎng)站的架構(gòu)，可能需要更細(xì)化的分法。這里需要提醒的一點(diǎn)是，模塊化CSS，我們應(yīng)該時(shí)刻明確，我們是為了方便管理，方便修改，方便多人合作，而不是簡(jiǎn)單的分割。如果說(shuō)有什么建議，我想，CSS的模塊化，應(yīng)該盡量與HTML的模塊化相一致。這里的一致說(shuō)的是，無(wú)論是在文件的分割上，還是在CSS內(nèi)容的分割上，與HTML的模塊化一致。這將會(huì)更有利于我們的工作。
it知識(shí)庫(kù)：模塊化 CSS – 更有效地管理CSS，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
