CSS程式碼重構與優化簡單介紹

寫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選擇器會內套多層，越來越複雜。

建議選擇器的巢狀最好不要超過三層，比如：

[CSS] 純文字檢視 複製程式碼
.header .logo .text{}

可以優化成

[CSS] 純文字檢視 複製程式碼
.haeder .logo-text{}

簡潔的選擇器不僅可以減少css檔案大小，提高頁面的載入效能，瀏覽器解析時也會更加高效，也會提高開發人員的開發效率，降低了維護成本。

4、精簡頁面的樣式檔案，去掉不用的樣式:

很多時候，我們會把所有的樣式檔案合併成一個檔案，但是這樣有一個問題：很多其他頁面的CSS同時引用到當前頁面中，而當前頁面並沒有用到它們，這種情況會造成兩個問題：

（1）樣式檔案偏大，影響載入速度

（2）瀏覽器會進行多餘的樣式匹配，影響渲染時間。

正確的處理方法是根據當前頁面需要的css去合併那些當前頁面用到的CSS檔案。

PS：合併成一個檔案有一個優點：樣式檔案會被瀏覽器快取，進入到其他頁面樣式檔案不用再去下載。這條規則應根據場景來區別對待，如果是大專案，應該合併成不同的樣式檔案，如果是簡單的專案，建議合併成一個檔案即可。如果無法確認專案規模，建議分開成不同的樣式檔案，日後要合併也比較方便。

5、利用CSS繼承減少程式碼量:

我們知道有一部分CSS程式碼是可以繼承的，如果父元素已經設定了該樣式，子元素就不需要去設定該樣式，這個也是提高效能的行之有效的方法。

常見的可以繼承的屬性比如：

color，font-size，font-family等等

不可繼承的比如：

position，display，float等

提高可維護性的方法:

提高CSS程式碼的可維護性，簡單的說就是要讓開發人員易於理解CSS程式碼，容易去修改它，不會破壞原有的功能。下面說說一些常用的手段。

1、命名與備註:

命名是提高程式碼可讀性的第一步，也是及其重要的一步。很多人都有這樣的體會：命名是寫程式碼中最讓程式設計師頭疼的事情之一，尤其是對母語非英語的開發人員來說，要找一個合適貼切的名字並不容易。提高自己命名的能力，可以多看看別人的程式碼。下面是CSS中的一些命名相關的建議：

[CSS] 純文字檢視 複製程式碼
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登入條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
選單：menu
子選單：submenu
搜尋：search
友情連結：friendlink
頁尾：footer
版權：copyright
滾動：scroll
內容：content
標籤：tags
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
註冊：regsiter
狀態：status
投票：vote
合作伙伴：partner
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
選單：menu
子選單：submenu
標題: title
摘要: summary

2、提取重複樣式:

這一個方法很容易理解，簡單說就是提取相同的樣式成為一個單獨的類再引用，這樣不僅可以精簡CSS檔案大小，而且CSS程式碼變少，更易於重用和維護。例如下面的例子：

原來的程式碼是這樣：

[CSS] 純文字檢視 複製程式碼
.about-title{
    margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px; font-size: 2rem; 
}
.achieve-title{
    margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px; font-size: 2rem; 
}

這兩個樣式的區別在於文字顏色的不同，我們可以將其公共的樣式提取出來，然後再分別設定其不同的樣式

[CSS] 純文字檢視 複製程式碼
.column-title{
    margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem; 
}
.about{
    color: #333;
}
.achieve{
    color:#fff;
}

提取公用的部分，然後在頁面上分別引用column-title和about等，這樣程式碼更簡潔，維護起來也更方便了。這個例子非常簡單，實際上專案中可能有更復雜的情況，總之就要要儘可能的DRY，儘可能的提取重複的東西。

3、書寫順序：

這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序

（1）位置屬性(position, top, right, z-index, display, float等)

（2）大小(width, height, padding, margin)

（3）文字系列(font, line-height, letter-spacing, color- text-align等)

（4）背景(background, border等)

（5）其他(animation, transition等)

書寫順序不一定非得按照上面的推薦來進行，而是根據你自己的習慣，但是最好能保證前後的習慣一致的，或者團隊應該有一個共同的程式碼規範去遵守，這樣後期維護起來也會方便許多。