寫(xiě)CSS的同學(xué)們往往會(huì)體會(huì)到，隨著項(xiàng)目規(guī)模的增加，項(xiàng)目中的CSS代碼也會(huì)越來(lái)越多，如果沒(méi)有及時(shí)對(duì)CSS代碼進(jìn)行維護(hù)，CSS代碼不斷會(huì)越來(lái)越多。CSS代碼交錯(cuò)復(fù)雜，像一張龐大的蜘蛛網(wǎng)分布在網(wǎng)站的各個(gè)位置，你不知道修改這行代碼會(huì)有什么影響，所以如果有修改或增加新功能時(shí)，開(kāi)發(fā)人員往往不敢去刪除舊的冗余的代碼，而保險(xiǎn)地增加新代碼，最終的壞處就是項(xiàng)目中的CSS會(huì)越來(lái)越多，最終陷入無(wú)底洞。

CSS代碼重構(gòu)的目的

我們寫(xiě)CSS代碼時(shí)，不僅僅只是完成頁(yè)面設(shè)計(jì)的效果，還應(yīng)該讓CSS代碼易于管理，維護(hù)。我們對(duì)CSS代碼重構(gòu)主要有兩個(gè)目的：

1、提高代碼性能

2、提高代碼的可維護(hù)性

提高代碼性能

提高CSS代碼性能主要有兩個(gè)點(diǎn)：

1、提高頁(yè)面的加載性能

提高頁(yè)面的加載性能，簡(jiǎn)單說(shuō)就是減小CSS文件的大小，提高頁(yè)面的加載速度，盡可以的利用http緩存

2、提高CSS代碼性能

不同的CSS代碼，瀏覽器對(duì)其解析的速度也是不一樣的，如何提高瀏覽器解析CSS代碼的速度也是我們要考慮的

提高代碼的可維護(hù)性

提高CSS代碼的可維護(hù)性主要是體現(xiàn)在下面幾點(diǎn)：

1、可重用性

一般來(lái)說(shuō)，一個(gè)項(xiàng)目的整體設(shè)計(jì)風(fēng)格是一致的，頁(yè)面中肯定有幾個(gè)風(fēng)格一致但有些許不同的模塊，如何在盡可能多地重用CSS代碼，盡可能少地增加新代碼，這是CSS代碼中非常重要的一點(diǎn)。如果CSS代碼的重用性高，我們可能只需要寫(xiě)一些不一樣的地方，對(duì)頁(yè)面性能和可維護(hù)性、提高開(kāi)發(fā)效率都有很大的幫助。

2、可擴(kuò)展性

如果產(chǎn)品增加了某個(gè)功能，我們應(yīng)該保證新增加的CSS代碼不會(huì)影響到舊的CSS代碼和頁(yè)面，并且盡可能少地增加新代碼而重用舊代碼。

3、可修改性

如果某個(gè)模塊產(chǎn)品經(jīng)理覺(jué)得要修改樣式，或者要?jiǎng)h掉它，如果沒(méi)有規(guī)劃好相應(yīng)的CSS代碼，過(guò)了一段時(shí)間之后，開(kāi)發(fā)人員可能已經(jīng)不記得這段代碼作用了幾個(gè)地方，不敢修改或刪除它，這樣下去CSS代碼也就越來(lái)越多，影響了頁(yè)面的性能，還造成了代碼的復(fù)雜度。

CSS代碼重構(gòu)的基本方法

前面說(shuō)到了CSS代碼重構(gòu)的目的，現(xiàn)在我們來(lái)說(shuō)說(shuō)一些如何達(dá)到這些目的的一些基本方法，這些方法都是易于理解，容易實(shí)施的一些手段，大家平時(shí)可能也不知不覺(jué)地在使用它。

提高CSS性能的手段

首先說(shuō)說(shuō)如何提高CSS性能，根據(jù)頁(yè)面的加載性能和CSS代碼性能，主要總結(jié)有下面幾點(diǎn)：

1、盡量將樣式寫(xiě)在單獨(dú)的css文件里面，在head元素中引用

有時(shí)候?yàn)榱藞D方便或者快速搞定功能，我們可能會(huì)直接將樣式寫(xiě)在頁(yè)面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡(jiǎn)單方便，但是非常不利于日后的維護(hù)。將代碼寫(xiě)成單獨(dú)的css文件有幾點(diǎn)好處：

（1）內(nèi)容和樣式分離，易于管理和維護(hù)

（2）減少頁(yè)面體積

（3）css文件可以被緩存、重用，維護(hù)成本降低

2、不使用@import

這條手段已經(jīng)是眾所周知，這里簡(jiǎn)單提一下，@import影響css文件的加載速度

3、避免使用復(fù)雜的選擇器，層級(jí)越少越好

有時(shí)候項(xiàng)目的模塊越來(lái)越多，功能越來(lái)越復(fù)雜，我們寫(xiě)的CSS選擇器會(huì)內(nèi)套多層，越來(lái)越復(fù)雜。

建議選擇器的嵌套最好不要超過(guò)三層，比如：

• header.logo.text{}

可以優(yōu)化成

• haeder.logo-text{}

簡(jiǎn)潔的選擇器不僅可以減少css文件大小，提高頁(yè)面的加載性能，瀏覽器解析時(shí)也會(huì)更加高效，也會(huì)提高開(kāi)發(fā)人員的開(kāi)發(fā)效率，降低了維護(hù)成本。

4、精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式

很多時(shí)候，我們會(huì)把所有的樣式文件合并成一個(gè)文件，但是這樣有一個(gè)問(wèn)題：很多其他頁(yè)面的CSS同時(shí)引用到當(dāng)前頁(yè)面中，而當(dāng)前頁(yè)面并沒(méi)有用到它們，這種情況會(huì)造成兩個(gè)問(wèn)題：

（1）樣式文件偏大，影響加載速度

（2）瀏覽器會(huì)進(jìn)行多余的樣式匹配，影響渲染時(shí)間。

正確的處理方法是根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件。

PS：合并成一個(gè)文件有一個(gè)優(yōu)點(diǎn)：樣式文件會(huì)被瀏覽器緩存，進(jìn)入到其他頁(yè)面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場(chǎng)景來(lái)區(qū)別對(duì)待，如果是大項(xiàng)目，應(yīng)該合并成不同的樣式文件，如果是簡(jiǎn)單的項(xiàng)目，建議合并成一個(gè)文件即可。如果無(wú)法確認(rèn)項(xiàng)目規(guī)模，建議分開(kāi)成不同的樣式文件，日后要合并也比較方便。

5、利用CSS繼承減少代碼量

我們知道有一部分CSS代碼是可以繼承的，如果父元素已經(jīng)設(shè)置了該樣式，子元素就不需要去設(shè)置該樣式，這個(gè)也是提高性能的行之有效的方法。

常見(jiàn)的可以繼承的屬性比如：

color，font-size，font-family等等

不可繼承的比如：

position，display，float等

大家可以查看CSS參考手冊(cè)