CSS模組化及多人分工協作

自己對css框架，css模組這些感念一直比較模糊，完全跟風狀態。最近在工作上遇到的問題，讓自己不得不重視這個問題。習慣了一個人搞定一切，策劃-設計-出頁面，當一個專案需要短時間多人協作完成時，樣式文件的規劃，css模組、框架的思想就先的尤其重要。

下面這個問題最近比較困擾：如果幾個人同時做一個網站前台，怎麼樣分配能讓整站風格統一，樣式文件結構合理沒有重複冗餘，效率最高？請教了幾個同學，得到的答案總結如下：風格統一方面，一起商量先出草圖，根據草圖由一個人做出標準風格頁面，然後一起開乾，剩下的就是不停的修改。製作方面，整站定下幾個不同的css文件，每人負責不同的樣式文件。

說起來容易的事情，一旦實施起來就不是那麼容易了。設計的事，還是不敢冒險，幸好頁面不是很多，一級、二級頁面加起來不到20個，一個人可以搞定。說下製作過程。

（一）規範css命名、書寫順序與註記。

這點重要性就不說了，很難想像，一個樣式表中同時出現幾種「個性化很強」的命名方式會讓人多糾結。命名可以使用中間「-」,"_"符號連接，如text-box,text-content,text_box，或大小寫「駝峰」式書寫，textBox,textContent等。註釋很重要，註釋可以分為三級，大類註釋用於css塊的劃分，如header ,container , footer,二類註釋，大類下面的局部模組註釋，三類註釋一個選擇符內註釋，用於一些特殊效果的註釋或hack註釋。書寫格式，可以採用橫排縮排的方式，顯示出層級關係。

（二）依效果圖，定下樣式表結構劃分

網路上很多介紹css檔案結構劃分的，大致就那幾個檔案：layout.css/main.css/footer.css/header.css/reset.css等等，大家都說自己的好，落實都實踐，才明白，沒有最好的，只有最適合的。最好的樣式劃分，應該是緊緊依賴HTML結構本身，不是放任四海皆的。
css檔案的分佈除了要方便以後的分工協作，還有灰常重要的一點：如果位元組小的話，可以盡量壓縮降低並發連接數，如果位元組過大，可以分割，防止下載速度太慢，影響樣式加載。這些就是具體問題具體對待了。例如搜尋引擎和入口網站首頁這種訪問量極大的頁面最好將css寫入頁面內部。

初步定下css樣式結構：
（三）分工協作

戲台已經搭玩了，接著就要開始唱戲。找出所有公開的文字列表，圖文混排列表。一個人負責寫在公共模組裡，頭部、尾部各一個人，二級頁面框架一個人，個性化的部分留到最後寫。

實際操作起來還是會有很多問題，程式碼的冗餘無法避免，只能最小化。為了高效有時也不得不做出犧牲。上面只是自己在工作上的一點心得。也是第一次真正的發掘css模組化思想的優越性：方便修改，便於管理，便於多人協作。期待和高手一起探討。

原文網址： http://www.woaicss.com/article/div/css53.htm