現(xiàn)在很多人會使用 CSS 框架進(jìn)行快速建站。 

那 CSS 框架是什么呢，它通常是一些 CSS 文件的集合，這些文件包括基本布局、表單樣式、網(wǎng)格、簡單組件、以及樣式重置。使用 CSS 框架大大降低工作成本進(jìn)行快速建站。 

當(dāng)然對于一些大型的項(xiàng)目，可能會很難照搬某些框架直接使用的，因?yàn)橹苯邮褂脮硪恍┫拗苹蛘呷哂嗟膯栴}。 

但在 CSS 框架已經(jīng)日趨成熟的今天，在我們設(shè)計(jì)項(xiàng)目架構(gòu)、規(guī)范的時(shí)候，現(xiàn)時(shí)市面上一些優(yōu)秀的框架也可以給我們提供很多可借鑒的地方。 

本文主要從幾個(gè)方面討論 CSS 框架可以對我們項(xiàng)目的借鑒點(diǎn)： 

1. 目錄組織

2. CSS 規(guī)范

3. 圖形

4. 應(yīng)用方式

5. 小建議 

1. 目錄組織 

在目錄組織的分析上我們參考了 Bootstrap , Blueprint , Yui , Yaml 四個(gè)框架的組織方式 

可以從CSS框架中借鑒到什么 

當(dāng)使用一個(gè)框架時(shí)，我們一般會把所需框架本身的樣式鏈到頁面中，然后在它的基礎(chǔ)上進(jìn)行修改。所以框架本身所帶的樣式可以理解為基礎(chǔ)樣式。即我們平時(shí)所說的全局樣式+組件樣式。

 

 

可以看到，在目錄架構(gòu)上4個(gè)框架基本都是遵循基本樣式+用戶定義擴(kuò)展樣式的常規(guī)方式進(jìn)行組織。 

然而，如果按 Bootstrap 做法的話，可能會出現(xiàn)把不常用組件樣式也包含在全局樣式中一并引入，如果把組件也寫在全局 CSS 中，最好確保該組件出現(xiàn)頻率較高才引入，避免不必要的帶寬浪費(fèi)。 

關(guān)于 hack： 

對于針對低版本瀏覽器所寫的 hack，對它的處理方式，Blueprint 和 Yaml 都是使用單獨(dú)引入 hack 文件的形式進(jìn)行處理，筆者也嘗試過這樣的做法。 

個(gè)人覺得這種方式的好處是可以避免給高級瀏覽器帶來冗余代碼，而且通過條件判斷引入 CSS 也不會給高級瀏覽器帶來額外的請求。 

這種方式比較適用于，高低級瀏覽器本來就刻意設(shè)計(jì)成有較大差別的情況下，即 hack 比較多的時(shí)候才使用。不然就為了十來行 hack 而多引入一個(gè)文件的話似乎也不太可取。 

2. CSS 規(guī)范 

a. 前綴 

框架中公用模塊都有前綴，分別有以下3個(gè)思想： 

1. Yaml , Yui ：無論如何都是統(tǒng)一的標(biāo)識開頭，再加上改模塊名稱。 

2. Bootstrap：直接模塊名稱，這方式需要定義關(guān)鍵字。公用模塊是 button 都以 btn – 開頭， image 則以 img- 開頭。 

3. Nec ：單字母開頭來標(biāo)識組件。

一般來說應(yīng)用一個(gè)框架，我們先引入框架的樣式，再在之上覆蓋上自己的樣式，所以可以把框架看作是我們的基礎(chǔ)CSS。 

我們可以借鑒框架的前綴規(guī)范來規(guī)劃我們的基礎(chǔ) CSS 前綴，根據(jù)自己的項(xiàng)目實(shí)際情況采取不同的方案。 

b. 類的劃分 

類的劃分方式在框架中主要有2種標(biāo)準(zhǔn)，分別為：以【組件為粒度】，和以【屬性為粒度】。 

1. 組件為粒度：把組件的所有樣式封裝在一個(gè)類名中，調(diào)用類名即可使用該組件。 

2. 屬性為粒度：需要屬性的時(shí)候，調(diào)用對應(yīng)類名拼裝。 

在我們?nèi)粘ｍ?xiàng)目中，以屬性對類名進(jìn)行劃分比較少見，因?yàn)橐恢弊裱亩际恰敖Y(jié)構(gòu)、樣式、行為”分離的原則，力求降低三者的耦合度。 

然而以這種方式劃分在一些特定情況下也不是完全不可取。 

例如對于一些元素的隱藏，如果沒提供相關(guān)的類名的話，在js開發(fā)階段開發(fā)就會直接內(nèi)聯(lián) style 在對應(yīng)的元素上（這將會觸發(fā) repaint/reflow），所以更好的方式是和js開發(fā)約定一個(gè)類名觸發(fā)顯示/隱藏的動作，在這種情況下，給 display: none 劃分一個(gè)特定的類名，供給開發(fā)調(diào)用就會顯得很實(shí)用了。 

所以，更重要的是我們對所在的實(shí)際情況進(jìn)行分析，并給出最佳的解決方案。 

c. 組件類名組合方式 

組件的樣式，基本都是 基礎(chǔ)類名+擴(kuò)展類名 的套路來進(jìn)行組合的變化。 

但在選擇符方面可以有3種方式， 目前最多框架使用的是：多類選擇，通過修改 html 的類名組合，實(shí)現(xiàn)還原。 

以按鈕樣式的實(shí)現(xiàn)為例： 

 

這里采用常規(guī)的組合方式，不再贅述。 

d. 高級 CSS 選擇器 

在對 Bootstrap 進(jìn)行分析的過程中，發(fā)現(xiàn) Bootstrap 定義了一系列的icon，這些 icon 的類名全部都是以 icon- 為前綴。 

而在 CSS 中，Bootstrap 用到了子串匹配屬性選擇器。 

[class^="icon-"] 

使用這個(gè)的好處是，對于 icon 類的標(biāo)簽，我們再也不需要對其加一個(gè)對于 icon 的公用類名，只需要類名是以 icon- 開頭就可以匹配所有 icon ，省了一個(gè)類名。 

使用這種方式可以降低一定的成本，但是只在 IE7+ 瀏覽器才適用，如果要使用該類選擇器的話請考慮是否需要兼容 IE6。 

雖然 IE6 不支持，但是高級 CSS 選擇器的確十分吸引，并且可用于移動端，所以特此提一下。 

3. 圖形 

在參考的 CSS 框架中，它們會提供一些簡單的圖形元素， 但是實(shí)現(xiàn)的方式也有彼此不同之處。 

但是共同點(diǎn)是，現(xiàn)今較新的框架，對于一些簡單的效果，都會使用 CSS3 實(shí)現(xiàn)一些簡單的漸變，對低版本 IE 進(jìn)行優(yōu)雅降級。 

4. 應(yīng)用方式 

在參考實(shí)例是怎樣使用這些框架的方式上，基本和我們平時(shí)項(xiàng)目使用方式一致 

在應(yīng)用方式上，一般有兩種方式。

 1. 對于以組件為粒度的樣式： 

按照 組件的 html 結(jié)構(gòu) 來拼合自己的頁面模塊，再輔助添加 自定義的類名 來控制其個(gè)性化定義。 

2. 對于以屬性為粒度的樣式： 

按所需要的樣式對應(yīng)類名進(jìn)行拼接。 

下面可以看幾個(gè)簡單的例子： 

1. 以組件為粒度： 

對于組件的覆蓋，采取常規(guī)的自定義類名覆蓋樣式，此處不再贅述。 

2. 以屬性為粒度： 

 

可以看到，若需要樣式是屬性以粒度，即把對應(yīng)類名調(diào)入即可，但是在實(shí)際項(xiàng)目中，這種方式由于靈活度不夠，并且沒有做到結(jié)構(gòu)與樣式分離，實(shí)際項(xiàng)目中比較少見這種用法。 

而對于功能性的動作，例如顯示/隱藏元素，可以靈活使用這種方式，把所需樣式寫到一個(gè)特定類名中供給js調(diào)用，避免直接寫入 style 導(dǎo)致 reflow/repaint。 

5. 小建議 

對于目錄組織： 

目錄組織—— 

可以考慮結(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)致的請求數(shù)過多問題。 

hack—— 

根據(jù)實(shí)際情況，可考慮把針對 IE6 的 hack 文件單獨(dú)分出來。 

【優(yōu)化點(diǎn)】 

便于對低級瀏覽器的大型差異化處理，并且減少對于高級瀏覽器的冗余代碼。 

對于 CSS 規(guī)范： 

CSS 前綴—— 

可考慮嘗試 Nec 的方式，約定 “單字母_xxx”為公用樣式的標(biāo)識，取消單一的公用前綴，通過以不同字母作為頂級前綴，對公用模塊進(jìn)行劃分。 

【優(yōu)化點(diǎn)】 

減免了“公用前綴_組件前綴_組件名”的多級前綴，通過以類名格式作為標(biāo)識，代替了原來公用前綴的作用。 

【權(quán)衡點(diǎn)】 

仍需按項(xiàng)目實(shí)際情況考慮。 

類的劃分—— 

可考慮約定統(tǒng)一幾個(gè)功能性的類名（以屬性為粒度的類名），例如元素隱藏的類名，供給js調(diào)用。 

【優(yōu)化點(diǎn)】 

減免讓開發(fā)直接寫 style 內(nèi)聯(lián) CSS，造成頁面的 reflow/repaint。 

高級 CSS 選擇器—— 

在對移動端頁面進(jìn)行重構(gòu)時(shí)可以考慮使用更高級的 CSS 選擇器。 

例： [class^=”icon”]，:first-child，:nth-child(n)…. 

【優(yōu)化點(diǎn)】

 相比于傳統(tǒng)的方法，節(jié)省類名。 

對于圖形： 

考慮與設(shè)計(jì)師約定，視覺效果在可接受范圍內(nèi)，部分效果使用 CSS3 實(shí)現(xiàn)，對低級瀏覽器實(shí)現(xiàn)優(yōu)雅降級。