1、個人總結(jié)了在開發(fā) css 框架中的一點經(jīng)驗，獻丑了。希望大家的討論能使我們共 同進步。：1、 css 框架中國的互聯(lián)網(wǎng)行業(yè)已經(jīng)發(fā)展了 10 年，瀏覽器也從最早流行的 NS 到現(xiàn)在的 FF3.IE7等等前端開發(fā)工程師的職位也誕生了。近幾年在 web 開發(fā)中，有個非常火的詞-“框架”。YUI、JQuery、Prototype 這些 javascript 框架在開發(fā)網(wǎng)站時，確實成為前端開發(fā)工程師的手中利器。為什么呢？因為框架是包含工具、 函數(shù)庫、約定,以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，讓設(shè)計師與程 序員避免重復(fù)開發(fā)。 通俗地講便是把大多數(shù)重復(fù)工作的 時間給節(jié)約了。編寫 css 也是一樣，

2、從最初只是定義文字顏色、 內(nèi)容排版,到現(xiàn)在定義所有的表現(xiàn)。css 框架也漸漸被重視了，因為大家都認(rèn)識到：從具象的表現(xiàn)中抽出抽象的模塊 來重復(fù)使用，是減少用戶下載、方便團隊及個人開發(fā)最重要的手段。2、 css 框架的開發(fā)順序a 格式化 reset.css格式化 css 的真正好處是能夠快速啟動工作，你可以在新的 HTML 文件里引入 框架，不用再處理重置 padding 和 margins，實現(xiàn)統(tǒng)一的排版、瀏覽器下的相同表 現(xiàn)。b 布局 layout.css定義頁面是二欄還是三欄，是全屏還是 1024X768一個網(wǎng)站的設(shè)計可能有很多種布局，但是大多數(shù)都是由幾個具有復(fù)用性的布局 組成，選擇性的引入

3、所需要的布局，可以很快地應(yīng)用所期望的頁面布局。c 基本樣式 type.cssfrontpage.css、list.css、detail.css、 register.css 等等定義 body、h1-h6、a:li nk-a:active、p 等的字體大小和顏色。基本樣式的 css 引用,譬如將 ul 定義 class 為“u-text ”用來展現(xiàn)相同的 icon、行間距、鏈接色彩。還可以像這樣應(yīng)用:class= ” ntext square ”前展現(xiàn)的是方型的 icon。d 表格修飾 table.css定義 table、tr、td、th、thead、tfoot、tbody、caption 等標(biāo)

4、簽的表現(xiàn)。和基本樣式一樣，但是表格在現(xiàn)有網(wǎng)站的展現(xiàn)形式幾乎都是處理數(shù)據(jù)，所以分開 存放引 用。譬如在 table 上應(yīng)用 table-style-1 便是黑色邊框的表格,table-style-2 便是 黃色邊框的表格。e 表單修飾 form.css定義 fieldset、label、button、in put、select textarea 這幾個標(biāo)簽的表現(xiàn)。大多數(shù)網(wǎng)站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css 是為了便于 統(tǒng)一在各個瀏覽器中的展現(xiàn)。默認(rèn)的按鈕、輸入框等在各個瀏覽器下的展現(xiàn)區(qū)別很大，雖然在格式化的 css 中已經(jīng)初步的統(tǒng)一，但是輸入框的邊框，按鈕的樣式 都是需要

5、在這個 css 中定義的。無奈的是 select 無法做到統(tǒng)一,如果考慮到用 js 實 現(xiàn)的話,這個成本太大了點。f 打印修飾 prin t.css修飾打印輸出的頁面。g 包含其他 css 的 css根據(jù)各種引用去引入相應(yīng)的 css。譬如 list 頁面中沒有需要表格的修飾，那就不 引入table.css。以節(jié)約代碼量。3、 css 框架文件夾的建立a core 主要的存放 reset.css、layout.css、type.css、print.cssb bud 模塊存放 table.css、form.css、album.css 等 cssc petal 具體應(yīng)用存放圭寸裝過的 css。fro

6、ntpage.css、llist.css、detail.css、register.css 等 css。 這個文件夾存放的 css 都是被直接引用的。文件夾的命名，按個人喜好啦！我還希望用電子、質(zhì)子等命名呢。嘿嘿！4、 css 框架的優(yōu)點a 提高開發(fā)效率。b 規(guī)范名稱定義，便于維護。c 規(guī)范項目開發(fā)流程d css 代碼更清晰、簡單。html 代碼更合理。5、 css 框架的弊端。a 學(xué)習(xí)成本提高。你需要了解整個框架，需要閱讀框架的文檔。b css 框架對于一個小項目等頁面來說很臃腫?？蚣苤锌赡苡写蟛糠帜阌貌坏降拇ac 可能會無法幫助你的技術(shù)提高。太依賴框架，以至于很難排除 bug。包括框架 中本

7、身就帶的 bug。d 選擇自己需要的框架與開發(fā)框架都很痛苦。寫到后面發(fā)現(xiàn)越來越不靈活，越來越臃腫。殘念-_-6 開發(fā)及使用 css 框架中常遇到的問題。1、 頁面外部引用樣式過多。譬如關(guān)于 ul 的 margin 定義,在格式化的 css 中會聲明為 0,而在基本樣式的 css 中又可能會聲明 margin:5px 10px;所以在 Yslow 中會出現(xiàn)多次定義。2、 組件復(fù)用性的考量。譬如表單定義的 css 中定義了所有表單的修飾，而假定在注冊這個頁面中只是 需要這個 css 的百分之三十。那是否應(yīng)切割出去那不要的百分之七十？綜合以上的二個問題，個人認(rèn)為解決的方式便是封裝，讓該有的有，不該有的沒 有。盡量減少 http 連接數(shù)和 css 的大小。但如果徹底是這樣做的話,css 的復(fù)用性 又會變得很差，后期手工的封裝會很痛苦。 只能套用小馬的一句話 具體情況，具 體分析”。人生真是矛盾啊3、 到底該不該支持 em?可見如要支持 em ,最大的目的是為了在瀏覽器中可以根據(jù)用戶的分辨率大小 自由縮放,對于擁有超大顯示器的用戶與小 顯示器的用戶是非常有用的?？墒窃诓杉覀冇脩舻臑g覽器 數(shù)據(jù)后,發(fā)現(xiàn)分辨處于這二端的用戶非常少，可想而知，為這 部分的用戶多花比正常開發(fā)一 倍以上的時間顯然是件不劃算的事情，所以當(dāng)