資深Web前端開發(fā)工程師教你如何優(yōu)化CSS框架

時間：2022-05-29 17:45:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 17:45:01 來源：網(wǎng)絡(luò)營銷

隨著網(wǎng)絡(luò)的發(fā)展，企業(yè)網(wǎng)站和個人網(wǎng)站已經(jīng)變的很普遍了，搭建網(wǎng)站是技術(shù)也變的越來越智能化了，很多人也逐步的開始使用CSS框架進(jìn)行快速建站。編寫css也是一樣，從最初只是定義文字顏色、內(nèi)容排版，到現(xiàn)在定義所有的表現(xiàn)。css框架也漸漸被重視了，因?yàn)榇蠹叶颊J(rèn)識到：從具象的表現(xiàn)中抽出抽象的模塊來重復(fù)使用，是減少用戶下載、方便團(tuán)隊(duì)及個人開發(fā)最重要的手段。

當(dāng)然對于一些大型的項(xiàng)目，我們可能會很難照搬某些框架直接使用的，因?yàn)橹苯邮褂脮硪恍┫拗苹蛘呷哂嗟膯栴}。但在CSS框架已經(jīng)日趨成熟的今天，在我們設(shè)計(jì)項(xiàng)目架構(gòu)、規(guī)范的時候，當(dāng)前市面上一些優(yōu)秀的框架也可以給我們提供很多可借鑒的地方。下面我們就借助億企邦的平臺教你如何優(yōu)化CSS框架。

一、CSS框架是什么？

CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式、通用規(guī)則、簡單組件、以及樣式重置等代碼塊，其目的就是用于簡化web前端開發(fā)的工作，提高工作效率，降低工作成本進(jìn)行快速建站。

1、CSS框架的優(yōu)點(diǎn)

（1）、提高開發(fā)效率。

（2）、規(guī)范名稱定義，便于維護(hù)。

（3）、規(guī)范項(xiàng)目開發(fā)流程。

（4）、css代碼更清晰、簡單。html代碼更合理。

（5）、大規(guī)模項(xiàng)目中可以減少用戶下載。

2、CSS框架的弊端

（1）、學(xué)習(xí)成本提高。你需要了解整個框架，需要閱讀框架的文檔。

（2）、css框架對于一個小項(xiàng)目等頁面來說很臃腫?？蚣苤锌赡苡写蟛糠帜阌貌坏降拇a。

（3）、可能會無法幫助你的技術(shù)提高。太依賴框架，以至于很難排除bug。包括框架中本身就帶的bug。

（4）、選擇自己需要的框架與開發(fā)框架都很痛苦。寫到后面發(fā)現(xiàn)越來越不靈活，越來越臃腫。

二、目錄組織

在目錄組織的分析上我們參考了Bootstrap, Blueprint, Yui, Yaml四個框架的組織方式，如下圖所示：

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

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

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

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

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

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

三、CSS規(guī)范

1、前綴

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

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

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

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

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

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

2、類的劃分

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

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

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

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

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

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

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

3、組件類名組合方式

以億企邦現(xiàn)有的資料了解到組件的樣式，基本都是基礎(chǔ)類名+擴(kuò)展類名的套路來進(jìn)行組合的變化。

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

以按鈕樣式的實(shí)現(xiàn)為例，如下圖所示：

這里采用的都是常規(guī)的組合方式，在此我就不再一一贅述。

4、高級CSS選擇器

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

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

[class^="icon-"]

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

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

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

四、CSS框架的圖形

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

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

五、CSS框架的應(yīng)用方式

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

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

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

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

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

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

下面可以看幾個簡單的例子：

（1）、以組件為粒度：

對于組件的覆蓋，采取常規(guī)的自定義類名覆蓋樣式，此處就不再一一贅述了，具體信息可通過億企邦其它文章來了解。

（2）、以屬性為粒度：

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

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

六、如何優(yōu)化CSS框架結(jié)構(gòu)

1、對于目錄組織

目錄組織——可以考慮結(jié)合Bootstrap與Yaml/Blueprint的思想。

（1）、把常用的基礎(chǔ)樣式壓縮合成一個文件。

（2）、把不必現(xiàn)組件樣式抽離成單獨(dú) CSS，按需加載。

【優(yōu)化點(diǎn)】：減少了單個global_min文件的大小。

【權(quán)衡點(diǎn)】：需要考慮由此可能導(dǎo)致的請求數(shù)過多問題。

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

【優(yōu)化點(diǎn)】：便于對低級瀏覽器的大型差異化處理，并且減少對于高級瀏覽器的冗余代碼。

2、對于CSS規(guī)范：

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

【優(yōu)化點(diǎn)】：減免了“公用前綴_組件前綴_組件名”的多級前綴，通過以類名格式作為標(biāo)識，代替了原來公用前綴的作用。

【權(quán)衡點(diǎn)】：仍需按項(xiàng)目實(shí)際情況考慮。

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

【優(yōu)化點(diǎn)】：減免讓開發(fā)直接寫 style 內(nèi)聯(lián) CSS，造成頁面的 reflow/repaint。

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

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

【優(yōu)化點(diǎn)】：相比于傳統(tǒng)的方法，節(jié)省類名。

3、對于圖形：

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

【優(yōu)化點(diǎn)】：大量減少圖片的使用，節(jié)省帶寬以及請求數(shù)。

億企邦點(diǎn)評：

隨著新技術(shù)的不斷涌現(xiàn)，越來越多優(yōu)秀的CSS框架呈現(xiàn)在我們的眼前，對于前端開發(fā)工程師來說，我們不但要學(xué)會這些新技術(shù)的應(yīng)用，更要從這些新技術(shù)中提取精華，進(jìn)行細(xì)節(jié)優(yōu)化，才是促使我們永遠(yuǎn)走在行業(yè)的最前沿。