寫CSS的同學們往往會體會到，隨著專案規模的增加，專案中的CSS程式碼也會越來越多，如果沒有及時對CSS程式碼進行維護，CSS程式碼不斷會越來越多。CSS程式碼交錯複雜，像一張龐大的蜘蛛網分佈在網站的各個位置，你不知道修改這行程式碼會有什麼影響，所以如果有修改或增加新功能時，開發人員往往不敢去刪除舊的冗餘的程式碼，而保險地增加新程式碼，最終的壞處就是專案中的CSS會越來越多，最終陷入無底洞。
CSS程式碼重構的目的
我們寫CSS程式碼時，不僅僅只是完成頁面設計的效果，還應該讓CSS程式碼易於管理，維護。我們對CSS程式碼重構主要有兩個目的：
1、提高程式碼效能
2、提高程式碼的可維護性
提高程式碼效能
提高CSS程式碼效能主要有兩個點：
1、提高頁面的載入效能
提高頁面的載入效能，簡單說就是減小CSS檔案的大小，提高頁面的載入速度，儘可以的利用http快取
2、提高CSS程式碼效能
不同的CSS程式碼，瀏覽器對其解析的速度也是不一樣的，如何提高瀏覽器解析CSS程式碼的速度也是我們要考慮的
提高程式碼的可維護性
提高CSS程式碼的可維護性主要是體現在下面幾點：
1、可重用性
一般來說，一個專案的整體設計風格是一致的，頁面中肯定有幾個風格一致但有些許不同的模組，如何在儘可能多地重用CSS程式碼，儘可能少地增加新程式碼，這是CSS程式碼中非常重要的一點。如果CSS程式碼的重用性高，我們可能只需要寫一些不一樣的地方，對頁面效能和可維護性、提高開發效率都有很大的幫助。
2、可擴充套件性
如果產品增加了某個功能，我們應該保證新增加的CSS程式碼不會影響到舊的CSS程式碼和頁面，並且儘可能少地增加新程式碼而重用舊程式碼。
3、可修改性
如果某個模組產品經理覺得要修改樣式，或者要刪掉它，如果沒有規劃好相應的CSS程式碼，過了一段時間之後，開發人員可能已經不記得這段程式碼作用了幾個地方，不敢修改或刪除它，這樣下去CSS程式碼也就越來越多，影響了頁面的效能，還造成了程式碼的複雜度。
CSS程式碼重構的基本方法
前面說到了CSS程式碼重構的目的，現在我們來說說一些如何達到這些目的的一些基本方法，這些方法都是易於理解，容易實施的一些手段，大家平時可能也不知不覺地在使用它。
提高CSS效能的手段
首先說說如何提高CSS效能，根據頁面的載入效能和CSS程式碼效能，主要總結有下面幾點：
1、儘量將樣式寫在單獨的css檔案裡面，在head元素中引用
有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標籤或者直接內聯在元素上，這樣雖然簡單方便，但是非常不利於日後的維護。將程式碼寫成單獨的css檔案有幾點好處：
（1）內容和樣式分離，易於管理和維護
（2）減少頁面體積
（3）css檔案可以被快取、重用，維護成本降低
2、不使用@import
這條手段已經是眾所周知，這裡簡單提一下，@import影響css檔案的載入速度
3、避免使用複雜的選擇器，層級越少越好
有時候專案的模組越來越多，功能越來越複雜，我們寫的CSS選擇器會內套多層，越來越複雜。
建議選擇器的巢狀最好不要超過三層，比如：
- header.logo.text{}
可以最佳化成
- haeder.logo-text{}
簡潔的選擇器不僅可以減少css檔案大小，提高頁面的載入效能，瀏覽器解析時也會更加高效，也會提高開發人員的開發效率，降低了維護成本。
4、精簡頁面的樣式檔案，去掉不用的樣式
很多時候，我們會把所有的樣式檔案合併成一個檔案，但是這樣有一個問題：很多其他頁面的CSS同時引用到當前頁面中，而當前頁面並沒有用到它們，這種情況會造成兩個問題：
（1）樣式檔案偏大，影響載入速度
（2）瀏覽器會進行多餘的樣式匹配，影響渲染時間。
正確的處理方法是根據當前頁面需要的css去合併那些當前頁面用到的CSS檔案。
PS：合併成一個檔案有一個優點：樣式檔案會被瀏覽器快取，進入到其他頁面樣式檔案不用再去下載。這條規則應根據場景來區別對待，如果是大專案，應該合併成不同的樣式檔案，如果是簡單的專案，建議合併成一個檔案即可。如果無法確認專案規模，建議分開成不同的樣式檔案，日後要合併也比較方便。
5、利用CSS繼承減少程式碼量
我們知道有一部分CSS程式碼是可以繼承的，如果父元素已經設定了該樣式，子元素就不需要去設定該樣式，這個也是提高效能的行之有效的方法。
常見的可以繼承的屬性比如：
color，font-size，font-family等等
不可繼承的比如：
position，display，float等
大家可以檢視CSS參考手冊