自己對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檔的分佈除了要方便以後的分工協作,qq表情還有灰常重要的一點:如果字節小的話,可以盡量壓縮降低並發連接數,如果字節過大,可以分割,防止下載速度太慢,影響樣式載入。這些就是具體問題具體對待了。例如搜尋引擎和入口網站首頁這種訪問量極大的頁面最好將css寫入頁面內部。
初步定下css樣式結構:
Example Source Code
reset.css /*頁面樣式儲值*/
header.css /*全站頭部樣式*/
footer.css /*全站尾樣式*/
public.css /*全站公共模組樣式*/
index.css /*首頁特有樣式*/
container.css /*二級及以下主體樣式*/
print.css /*列印樣式*/
ie.css /*IE hack*/
(三)分工協作
戲台已經搭玩了,接著就要開始唱戲。找出所有公開的文字列表,圖文混排列表。一個人負責寫在公共模組裡,頭部、尾部各一個人,二級頁面框架一個人,個性化的部分留到最後寫。
實際操作起來還是會有很多問題,程式碼的冗餘無法避免,只能最小化。為了高效有時也不得不做出犧牲。