個(gè)人總結(jié)了在開發(fā)css框架中的一點(diǎn)經(jīng)驗(yàn)，獻(xiàn)丑了。希望大家的討論能使我們共同進(jìn)步。:)
1、css框架
中國(guó)的互聯(lián)網(wǎng)行業(yè)已經(jīng)發(fā)展了10年，瀏覽器也從最早流行的NS到現(xiàn)在的FF3.IE7等等……前端開發(fā)工程師的職位也誕生了。近幾年在web開發(fā)中，有個(gè)非?；鸬脑~—— “框架”。YUI、JQuery、Prototype這些javascript框架在開發(fā)網(wǎng)站時(shí)，確實(shí)成為前端開發(fā)工程師的手中利器。為什么呢?因?yàn)榭蚣苁前ぞ?、函?shù)庫(kù)、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，讓設(shè)計(jì)師與程序員避免重復(fù)開發(fā)。通俗地講便是把大多數(shù)重復(fù)工作的時(shí)間給節(jié)約了。
編寫css也是一樣，從最初只是定義文字顏色、內(nèi)容排版，到現(xiàn)在定義所有的表現(xiàn)。css框架也漸漸被重視了，因?yàn)榇蠹叶颊J(rèn)識(shí)到：從具象的表現(xiàn)中抽出抽象的模塊來(lái)重復(fù)使用，是減少用戶下載、方便團(tuán)隊(duì)及個(gè)人開發(fā)最重要的手段。
2、css框架的開發(fā)順序
a) 格式化 reset.css
格式化css的真正好處是能夠快速啟動(dòng)工作，你可以在新的HTML文件里引入框架，不用再處理重置padding 和 margins，實(shí)現(xiàn)統(tǒng)一的排版、瀏覽器下的相同表現(xiàn)。
b) 布局 layout.css
定義頁(yè)面是二欄還是三欄，是全屏還是1024×768……
一個(gè)網(wǎng)站的設(shè)計(jì)可能有很多種布局，但是大多數(shù)都是由幾個(gè)具有復(fù)用性的布局組成，選擇性的引入所需要的布局，可以很快地應(yīng)用所期望的頁(yè)面布局。
c) 基本樣式 type.css
定義body、h1-h6、a:link-a:active、p等的字體大小和顏色。
基本樣式的css引用，譬如將ul定義class為“ul-text”，用來(lái)展現(xiàn)相同的icon、行間距、鏈接色彩。
還可以像這樣應(yīng)用：class=”ul-text square”，li前展現(xiàn)的是方型的icon。
d) 表格修飾 table.css
定義table、tr、td、th、thead、tfoot、tbody、caption等標(biāo)簽的表現(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、input 、select、textarea這幾個(gè)標(biāo)簽的表現(xiàn)。
大多數(shù)網(wǎng)站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個(gè)css，是為了便于統(tǒng)一在各個(gè)瀏覽器中的展現(xiàn)。默認(rèn)的按鈕、輸入框等在各個(gè)瀏覽器下的展現(xiàn)區(qū)別很大，雖然在格式化的css中已經(jīng)初步的統(tǒng)一，但是輸入框的邊框，按鈕的樣式都是需要在這個(gè)css中定義的。無(wú)奈的是select無(wú)法做到統(tǒng)一，如果考慮到用js實(shí)現(xiàn)的話，這個(gè)成本太大了點(diǎn)。
f) 打印修飾 print.css
修飾打印輸出的頁(yè)面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根據(jù)各種引用去引入相應(yīng)的css。譬如list頁(yè)面中沒(méi)有需要表格的修飾，那就不引入table.css。以節(jié)約代碼量。
1、css框架
中國(guó)的互聯(lián)網(wǎng)行業(yè)已經(jīng)發(fā)展了10年，瀏覽器也從最早流行的NS到現(xiàn)在的FF3.IE7等等……前端開發(fā)工程師的職位也誕生了。近幾年在web開發(fā)中，有個(gè)非?；鸬脑~—— “框架”。YUI、JQuery、Prototype這些javascript框架在開發(fā)網(wǎng)站時(shí)，確實(shí)成為前端開發(fā)工程師的手中利器。為什么呢?因?yàn)榭蚣苁前ぞ?、函?shù)庫(kù)、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，讓設(shè)計(jì)師與程序員避免重復(fù)開發(fā)。通俗地講便是把大多數(shù)重復(fù)工作的時(shí)間給節(jié)約了。
編寫css也是一樣，從最初只是定義文字顏色、內(nèi)容排版，到現(xiàn)在定義所有的表現(xiàn)。css框架也漸漸被重視了，因?yàn)榇蠹叶颊J(rèn)識(shí)到：從具象的表現(xiàn)中抽出抽象的模塊來(lái)重復(fù)使用，是減少用戶下載、方便團(tuán)隊(duì)及個(gè)人開發(fā)最重要的手段。
2、css框架的開發(fā)順序
a) 格式化 reset.css
格式化css的真正好處是能夠快速啟動(dòng)工作，你可以在新的HTML文件里引入框架，不用再處理重置padding 和 margins，實(shí)現(xiàn)統(tǒng)一的排版、瀏覽器下的相同表現(xiàn)。
b) 布局 layout.css
定義頁(yè)面是二欄還是三欄，是全屏還是1024×768……
一個(gè)網(wǎng)站的設(shè)計(jì)可能有很多種布局，但是大多數(shù)都是由幾個(gè)具有復(fù)用性的布局組成，選擇性的引入所需要的布局，可以很快地應(yīng)用所期望的頁(yè)面布局。
c) 基本樣式 type.css
定義body、h1-h6、a:link-a:active、p等的字體大小和顏色。
基本樣式的css引用，譬如將ul定義class為“ul-text”，用來(lái)展現(xiàn)相同的icon、行間距、鏈接色彩。
還可以像這樣應(yīng)用：class=”ul-text square”，li前展現(xiàn)的是方型的icon。
d) 表格修飾 table.css
定義table、tr、td、th、thead、tfoot、tbody、caption等標(biāo)簽的表現(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、input 、select、textarea這幾個(gè)標(biāo)簽的表現(xiàn)。
大多數(shù)網(wǎng)站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個(gè)css，是為了便于統(tǒng)一在各個(gè)瀏覽器中的展現(xiàn)。默認(rèn)的按鈕、輸入框等在各個(gè)瀏覽器下的展現(xiàn)區(qū)別很大，雖然在格式化的css中已經(jīng)初步的統(tǒng)一，但是輸入框的邊框，按鈕的樣式都是需要在這個(gè)css中定義的。無(wú)奈的是select無(wú)法做到統(tǒng)一，如果考慮到用js實(shí)現(xiàn)的話，這個(gè)成本太大了點(diǎn)。
f) 打印修飾 print.css
修飾打印輸出的頁(yè)面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根據(jù)各種引用去引入相應(yīng)的css。譬如list頁(yè)面中沒(méi)有需要表格的修飾，那就不引入table.css。以節(jié)約代碼量。