現(xiàn)在很多人會(huì)使用 CSS 框架進(jìn)行快速建站。
那 CSS 框架是什么呢，它通常是一些 CSS 文件的集合，這些文件包括基本布局、表單樣式、網(wǎng)格、簡(jiǎn)單組件、以及樣式重置。使用 CSS 框架大大降低工作成本進(jìn)行快速建站。
當(dāng)然對(duì)于一些大型的項(xiàng)目，可能會(huì)很難照搬某些框架直接使用的，因?yàn)橹苯邮褂脮?huì)帶來(lái)一些限制或者冗余的問(wèn)題。
但在 CSS 框架已經(jīng)日趨成熟的今天，在我們?cè)O(shè)計(jì)項(xiàng)目架構(gòu)、規(guī)范的時(shí)候，現(xiàn)時(shí)市面上一些優(yōu)秀的框架也可以給我們提供很多可借鑒的地方。
本文主要從幾個(gè)方面討論 CSS 框架可以對(duì)我們項(xiàng)目的借鑒點(diǎn)：
1. 目錄組織
2. CSS 規(guī)范
3. 圖形
4. 應(yīng)用方式
5. 小建議
1. 目錄組織
在目錄組織的分析上我們參考了 Bootstrap , Blueprint , Yui , Yaml 四個(gè)框架的組織方式
派點(diǎn)互動(dòng)|網(wǎng)站開發(fā)|廣州網(wǎng)站開發(fā)
當(dāng)使用一個(gè)框架時(shí)，我們一般會(huì)把所需框架本身的樣式鏈到頁(yè)面中，然后在它的基礎(chǔ)上進(jìn)行修改。所以框架本身所帶的樣式可以理解為基礎(chǔ)樣式。即我們平時(shí)所說(shuō)的全局樣式+組件樣式。
可以看到，在目錄架構(gòu)上4個(gè)框架基本都是遵循基本樣式+用戶定義擴(kuò)展樣式的常規(guī)方式進(jìn)行組織。
然而，如果按 Bootstrap 做法的話，可能會(huì)出現(xiàn)把不常用組件樣式也包含在全局樣式中一并引入，如果把組件也寫在全局 CSS 中，最好確保該組件出現(xiàn)頻率較高才引入，避免不必要的帶寬浪費(fèi)。
關(guān)于 hack：
對(duì)于針對(duì)低版本瀏覽器所寫的 hack，對(duì)它的處理方式，Blueprint 和 Yaml 都是使用單獨(dú)引入 hack 文件的形式進(jìn)行處理，筆者也嘗試過(guò)這樣的做法。
個(gè)人覺(jué)得這種方式的好處是可以避免給高級(jí)瀏覽器帶來(lái)冗余代碼，而且通過(guò)條件判斷引入 CSS 也不會(huì)給高級(jí)瀏覽器帶來(lái)額外的請(qǐng)求。
這種方式比較適用于，高低級(jí)瀏覽器本來(lái)就刻意設(shè)計(jì)成有較大差別的情況下，即 hack 比較多的時(shí)候才使用。不然就為了十來(lái)行 hack 而多引入一個(gè)文件的話似乎也不太可取。
2. CSS 規(guī)范
a. 前綴
框架中公用模塊都有前綴，分別有以下3個(gè)思想：
1. Yaml , Yui ：無(wú)論如何都是統(tǒng)一的標(biāo)識(shí)開頭，再加上改模塊名稱。
2. Bootstrap：直接模塊名稱，這方式需要定義關(guān)鍵字。公用模塊是 button 都以 btn – 開頭， image 則以 img- 開頭。
3. Nec ：?jiǎn)巫帜搁_頭來(lái)標(biāo)識(shí)組件。
一般來(lái)說(shuō)應(yīng)用一個(gè)框架，我們先引入框架的樣式，再在之上覆蓋上自己的樣式，所以可以把框架看作是我們的基礎(chǔ)CSS。
我們可以借鑒框架的前綴規(guī)范來(lái)規(guī)劃我們的基礎(chǔ) CSS 前綴，根據(jù)自己的項(xiàng)目實(shí)際情況采取不同的方案。
b. 類的劃分
類的劃分方式在框架中主要有2種標(biāo)準(zhǔn)，分別為：以【組件為粒度】，和以【屬性為粒度】。
1. 組件為粒度：把組件的所有樣式封裝在一個(gè)類名中，調(diào)用類名即可使用該組件。
2. 屬性為粒度：需要屬性的時(shí)候，調(diào)用對(duì)應(yīng)類名拼裝。
在我們?nèi)粘ｍ?xiàng)目中，以屬性對(duì)類名進(jìn)行劃分比較少見，因?yàn)橐恢弊裱亩际恰敖Y(jié)構(gòu)、樣式、行為”分離的原則，力求降低三者的耦合度。
然而以這種方式劃分在一些特定情況下也不是完全不可取。
例如對(duì)于一些元素的隱藏，如果沒(méi)提供相關(guān)的類名的話，在js開發(fā)階段開發(fā)就會(huì)直接內(nèi)聯(lián) style 在對(duì)應(yīng)的元素上（這將會(huì)觸發(fā) repaint/reflow），所以更好的方式是和js開發(fā)約定一個(gè)類名觸發(fā)顯示/隱藏的動(dòng)作，在這種情況下，給 display: none 劃分一個(gè)特定的類名，供給開發(fā)調(diào)用就會(huì)顯得很實(shí)用了。
所以，更重要的是我們對(duì)所在的實(shí)際情況進(jìn)行分析，并給出最佳的解決方案。
c. 組件類名組合方式
組件的樣式，基本都是 基礎(chǔ)類名+擴(kuò)展類名 的套路來(lái)進(jìn)行組合的變化。
但在選擇符方面可以有3種方式， 目前最多框架使用的是：多類選擇，通過(guò)修改 html 的類名組合，實(shí)現(xiàn)還原。
以按鈕樣式的實(shí)現(xiàn)為例：
這里采用常規(guī)的組合方式，不再贅述。
d. 高級(jí) CSS 選擇器
在對(duì) Bootstrap 進(jìn)行分析的過(guò)程中，發(fā)現(xiàn) Bootstrap 定義了一系列的icon，這些 icon 的類名全部都是以 icon- 為前綴。
而在 CSS 中，Bootstrap 用到了子串匹配屬性選擇器。
[class^="icon-"]
使用這個(gè)的好處是，對(duì)于 icon 類的標(biāo)簽，我們?cè)僖膊恍枰獙?duì)其加一個(gè)對(duì)于 icon 的公用類名，只需要類名是以 icon- 開頭就可以匹配所有 icon ，省了一個(gè)類名。
使用這種方式可以降低一定的成本，但是只在 IE7+ 瀏覽器才適用，如果要使用該類選擇器的話請(qǐng)考慮是否需要兼容 IE6。
雖然 IE6 不支持，但是高級(jí) CSS 選擇器的確十分吸引，并且可用于移動(dòng)端，所以特此提一下。
3. 圖形
在參考的 CSS 框架中，它們會(huì)提供一些簡(jiǎn)單的圖形元素， 但是實(shí)現(xiàn)的方式也有彼此不同之處。
但是共同點(diǎn)是，現(xiàn)今較新的框架，對(duì)于一些簡(jiǎn)單的效果，都會(huì)使用 CSS3 實(shí)現(xiàn)一些簡(jiǎn)單的漸變，對(duì)低版本 IE 進(jìn)行優(yōu)雅降級(jí)。
4. 應(yīng)用方式
在參考實(shí)例是怎樣使用這些框架的方式上，基本和我們平時(shí)項(xiàng)目使用方式一致。
在應(yīng)用方式上，一般有兩種方式。
1. 對(duì)于以組件為粒度的樣式：
按照 組件的 html 結(jié)構(gòu) 來(lái)拼合自己的頁(yè)面模塊，再輔助添加 自定義的類名 來(lái)控制其個(gè)性化定義。
2. 對(duì)于以屬性為粒度的樣式：
按所需要的樣式對(duì)應(yīng)類名進(jìn)行拼接。
下面可以看幾個(gè)簡(jiǎn)單的例子：
1. 以組件為粒度：
對(duì)于組件的覆蓋，采取常規(guī)的自定義類名覆蓋樣式，此處不再贅述。
2. 以屬性為粒度：
可以看到，若需要樣式是屬性以粒度，即把對(duì)應(yīng)類名調(diào)入即可，但是在實(shí)際項(xiàng)目中，這種方式由于靈活度不夠，并且沒(méi)有做到結(jié)構(gòu)與樣式分離，實(shí)際項(xiàng)目中比較少見這種用法。
而對(duì)于功能性的動(dòng)作，例如顯示/隱藏元素，可以靈活使用這種方式，把所需樣式寫到一個(gè)特定類名中供給js調(diào)用，避免直接寫入 style 導(dǎo)致 reflow/repaint。
5. 小建議
對(duì)于目錄組織：
目錄組織——
可以考慮結(jié)合 Bootstrap 與 Yaml/Blueprint 的思想。
a .把常用的基礎(chǔ)樣式壓縮合成一個(gè)文件。
b. 把不必現(xiàn)組件樣式抽離成單獨(dú) CSS，按需加載。
【優(yōu)化點(diǎn)】
減少了單個(gè) global_min 文件的大小。
【權(quán)衡點(diǎn)】
需要考慮由此可能導(dǎo)致的請(qǐng)求數(shù)過(guò)多問(wèn)題。
hack——
根據(jù)實(shí)際情況，可考慮把針對(duì) IE6 的 hack 文件單獨(dú)分出來(lái)。
【優(yōu)化點(diǎn)】
便于對(duì)低級(jí)瀏覽器的大型差異化處理，并且減少對(duì)于高級(jí)瀏覽器的冗余代碼。
對(duì)于 CSS 規(guī)范：
CSS 前綴——
可考慮嘗試 Nec 的方式，約定 “單字母_xxx”為公用樣式的標(biāo)識(shí)，取消單一的公用前綴，通過(guò)以不同字母作為頂級(jí)前綴，對(duì)公用模塊進(jìn)行劃分。
【優(yōu)化點(diǎn)】
減免了“公用前綴_組件前綴_組件名”的多級(jí)前綴，通過(guò)以類名格式作為標(biāo)識(shí)，代替了原來(lái)公用前綴的作用。
【權(quán)衡點(diǎn)】
仍需按項(xiàng)目實(shí)際情況考慮。
類的劃分——
可考慮約定統(tǒng)一幾個(gè)功能性的類名（以屬性為粒度的類名），例如元素隱藏的類名，供給js調(diào)用。
【優(yōu)化點(diǎn)】
減免讓開發(fā)直接寫 style 內(nèi)聯(lián) CSS，造成頁(yè)面的 reflow/repaint。
高級(jí) CSS 選擇器——
在對(duì)移動(dòng)端頁(yè)面進(jìn)行重構(gòu)時(shí)可以考慮使用更高級(jí)的 CSS 選擇器。
例： [class^=”icon”]，:first-child，:nth-child(n)….
【優(yōu)化點(diǎn)】
相比于傳統(tǒng)的方法，節(jié)省類名。
對(duì)于圖形：
考慮與設(shè)計(jì)師約定，視覺(jué)效果在可接受范圍內(nèi)，部分效果使用 CSS3 實(shí)現(xiàn)，對(duì)低級(jí)瀏覽器實(shí)現(xiàn)優(yōu)雅降級(jí)。
【優(yōu)化點(diǎn)】
大量減少圖片的使用，節(jié)省帶寬以及請(qǐng)求數(shù)。
