什么是css框架
css框架對(duì)于一個(gè)小項(xiàng)目等頁(yè)面來說很臃腫，框架中可能有大部分你用不到的代碼。那么你對(duì)css框架了解多少呢?下面就讓學(xué)習(xí)啦小編來給你科普一下什么是css框架。
css框架的特征
1.抽象出常用的css樣式,高再可用性,高移植性
2.有固有的定義,詳細(xì)的文檔及開發(fā)特點(diǎn)
3.高兼容性,可以兼容流行的瀏覽器
4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用于兼容瀏覽器
css框架的開發(fā)順序
a)格式化reset.css
格式化css的真正好處是能夠快速啟動(dòng)工作，你可以在新的HTML文件里引入框架，不用再處理重置padding 和 margin，實(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”，用來展現(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è)面中沒有需要表格的修飾，那就不引入table.css。以節(jié)約代碼量。
css框架的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
a) 提高開發(fā)效率。
b) 規(guī)范名稱定義，便于維護(hù)。
c) 規(guī)范項(xiàng)目開發(fā)流程
d)css代碼更清晰、簡(jiǎn)單。html代碼更合理。
e) 大規(guī)模項(xiàng)目中可以減少用戶下載
弊端
a) 學(xué)習(xí)成本提高。你需要了解整個(gè)框架，需要閱讀框架的文檔。
b)css框架對(duì)于一個(gè)小項(xiàng)目等頁(yè)面來說很臃腫?？蚣苤锌赡苡写蟛糠帜阌貌坏降拇a。
c)可能會(huì)無(wú)法幫助你的技術(shù)提高。太依賴框架，以至于很難排除bug。包括框架中本身就帶的bug。
d) 選擇自己需要的框架與開發(fā)框架都很痛苦。寫到后面發(fā)現(xiàn)越來越不靈活，越來越臃腫。
css框架的常見問題
1、頁(yè)面外部引用樣式過多。
譬如關(guān)于ul的margin定義,在格式化的css中會(huì)聲明為0，而在基本樣式的css中又可能會(huì)聲明margin:5px 10px;
所以在Yslow中會(huì)出現(xiàn)多次定義。
2、組件復(fù)用性的考量。
譬如表單定義的css中定義了所有表單的修飾,而假定在注冊(cè)這個(gè)頁(yè)面中只是需要這個(gè)css的百分之三十。那是否應(yīng)切割出去那不要的百分之七十?
綜合以上的二個(gè)問題，個(gè)人認(rèn)為解決的方式便是封裝，讓該有的有，不該有的沒有。盡量減少http連接數(shù)和css的大小。但如果徹底是這樣做的話，css的復(fù)用性又會(huì)變得很差，后期手工的封裝會(huì)很痛苦。
3、到底該不該支持em?
可見如要支持em，最大的目的是為了在瀏覽器中可以根據(jù)用戶的分辨率大小自由縮放，對(duì)于擁有超大顯示器的用戶與小顯示器的用戶是非常有用的。可是在采集我們用戶的瀏覽器數(shù)據(jù)后，發(fā)現(xiàn)分辨處于這二端的用戶非常少，可想而知，為這部分的用戶多花比正常開發(fā)一倍以上的時(shí)間顯然是件不劃算的事情，所以當(dāng)初在開發(fā)tbsp的時(shí)候，我們團(tuán)隊(duì)就決定了不支持em。當(dāng)然這是個(gè)建議，我們也希望能使用em帶給用戶最好的感受。
看過“css框架優(yōu)缺點(diǎn)”的人還看了：