模組化 CSS – 更有效地管理CSS

文章目錄

• 一、效率問題與最終目的
• 二、調用儘可能少的CSS檔案
• 三、多人合作上的問題
• 結語：

編輯點評：在設計網站CSS時，採用模組化CSS的方法，能夠更加方便的管理CSS代碼，並且利於多人合作。

　　在剛學習CSS初期，就接觸了"模組化 CSS"這樣的概念，不過，一直沒有很好的理解。說起來，理由很簡單：因為幾乎所有的代碼都是為了部落格的設計，而像部落格這麼小的架構，CSS檔案根本不用 多，因為本身代碼量就小，使用不同表現形式的頁面模板並不多，少反而更方便管理。所以，對於模組化CSS的理解很亂，直接導致自己一直認為下面的分法是非 常合理的：

1. reset.css //對瀏覽器的預設樣式進行重設
2. layout.css //管理頁面的布局
3. typeset.css //圖文的編排與
4. color.css //統一管理顏色的搭配
5. print.css //列印效果樣式
6. ie.css //把對ie的hack單獨分開

　　其實不然，最近工作，接觸了公司的網站，leader要自己寫CSS的寫作規範，以及一些HTML的統一規範；並且寫了新的頻道/頁面/賣場。 才發現，原來，上面的分法還是太理想化了。以個人來說，個人認為可以用下面的分割法。先寫下，然後，讓我們對比這兩種分法，找到更好的解決CSS檔案管理 的合適的CSS模組化分法：

1. reset.css
2. header.css //頭部的所有樣式
3. container.css //除頭部/底部外的中間地區樣式
4. footer.css //底部樣式
5. print.css
6. ie.css

　　我們可以看到，不同的有三個CSS檔案。第一種分法是種不錯的做法，但管理起來比較麻煩，雖然是"模組化"了，把表現的內容的樣式分開。但由於每個人都不可能百分百瞭解每個CSS檔案裡面的內容，所以，可能導致下面的問題：

一、效率問題與最終目的

　　在網站內容上面，如果改某一個地區的內容，可能要幾個CSS都改。這樣一來，本來簡單的一個修改，開始變得複雜起來。並且，如果多個都改，可能會使我們忽略了某些東西，又需要進一步調試，這樣不僅肯使最終目的實現延後，還是一個效率的問題。

二、調用儘可能少的CSS檔案

　　大多樓情況下，一個網站都是分成頭部，中部和底部，並且，一般，要做新的頻道/頁面之類的東西，都不會變動頭部和底部，而只是變動中間部分。這 樣一來，所有CSS檔案都要調用，因為，HTML和CSS的模組化並不一致。這樣，就會導致伺服器承受更多的壓力。這是一個方面。另一個方面是，如果新頁 面中某些元素與其他頁面有衝突，我們可能要搞一大堆關於優先性選擇的代碼，增加代碼量。這些都不是我們想要的。這就為什麼要把header.css和 footer.css分開來的原因。

三、多人合作上的問題

　　如果我們多個人在工作，大家的分工可能是，有人完成頭部的導航，有人完成底部的搜尋條，有人完成中部新頁面的構建。這樣一來，大家都同時在改幾 個檔案，並且，改的東西不同。如果要更新到伺服器，就要先對比，再更新。（當然，現在有版本管理這樣的軟體。但是，同時工作的話，版本也是一個問題，要相 信，或許更新永遠都改不上改變。）

結語：

　　當然，上面的分法，只是一個簡單的模型。不同網站的架構，可能需要更細化的分法。這裡需要提醒的一點是，模組化CSS，我們應該時刻明確，我們 是為了方便管理，方便修改，方便多人合作，而不是簡單的分割。如果說有什麼建議，我想，CSS的模組化，應該盡量與HTML的模組化相一致。這裡的一致說 的是，無論是在檔案的分割上，還是在CSS內容的分割上，與HTML的模組化一致。這將會更有利於我們的工作。