Web優化的物件包括頁面效能、使用者體驗、開發效率、程式碼優化、網路延遲等，本系列會列舉出眾多常用的優化技巧，每個技巧都可深入分析，在此只做拋磚引玉。

　　本系列優化內容提煉於《前端面試寶典》、《高效前端》、《高效能JavaScript》、《CSS重構》等書籍，以及《2020前端效能優化清單》等網路資源。

　　CSS優化包括減少樣式量、合理使用CSS3特性、對樣式分類、採用前處理器等。

一、CSS選擇器

1）匹配優化

　　由於CSS選擇器是從右往左進行匹配，因此下面的這條規則並不高效，瀏覽器需要遍歷頁面中的div元素並確定其父元素的id是否為“container”。

#container > div { }

　　最右邊的引數叫關鍵選擇器，對瀏覽器執行的工作量起主要影響。在優化時，可將重心放到關鍵選擇器上。

2）保持簡潔

　　雖然下面的選擇器非常精確，但是一旦HTML結構發生變化，匹配就會失敗。

div > nav > ul > li > a { }

　　更佳的做法是為HTML元素增加一個類，併為該類增加樣式。簡潔的選擇器也會讓CSS檔案變小。

.nav-link { }

3）語義化類名

　　有意義的類名可提供恰如其分的樣式資訊，既能防止因細節過少而表意模糊，又能避免因資訊過多而妨礙程式碼重用，例如用“.animal”描述動物的樣式。

　　注意，也不要過於精確，例如female-black-and-white-kitten（雌性—黑—和—白—小貓）。

4）避免相同類名

　　有時候會故意寫相同類名，以覆蓋之前的樣式。但在多人協作時，很容易因為同名而發生衝突，可以引入一個名稱空間加以區分。

5）偽類的妙用

　　偽類不僅僅只是連結的懸浮、元素位置，CSS3新增了一大批偽類，既彌補了常規選擇器的不同，也能解決部分頁面互動。

　　例如自定義單選框的選中樣式，以往得藉助JavaScript，現在只需幾句CSS就可完成。如下所示，為單選框宣告:checked偽類，

.ui-radio span {

  display: block;

  width: 100%;

  background: #FFF;

  color: #F60;

}

.ui-radio input[type=radio]:checked ~ span {
 

  background: #Fc0;

  color: #FFF;

}

二、CSS屬性

1）巧用繼承

　　屬性繼承可以通過inherit關鍵字顯式宣告，而有些屬性還支援自動繼承，常用的包括：

　　1. 字型系列屬性：font-family，font-size

　　2. 文本系列屬性：text-indent，line-height，color

　　3. 元素可見性：visibility

　　4. 表格佈局屬性：border-style

　　5. 列表佈局屬性：list-style，list-style-type

　　6. 遊標屬性：cursor

　　佈局相關的屬性大都不可繼承。樣式多繼承可以減少很多冗餘程式碼，減小CSS檔案的大小，保持高可讀性，降低後期維護成本。

2）慎用!important

　　宣告!important後的屬性，其特殊性非常高，很容易影響別處的樣式，並且在老舊專案中很難修改，會出現牽一髮動全身的情況。

3）flexbox

　　彈性佈局很適合移動端頁面，大大簡化了頁面佈局難度，並且已經獲得了瀏覽器的廣泛支援。

　　過去佈局常會用float屬性，但其實它最初的作用是為了實現文字環繞影象的效果。當用於佈局時，必須清除浮動，否則會造成父元素塌陷、非浮動元素環繞等問題。

　　所以要避免使用float屬性，多用彈性佈局。CSS3最新的網格佈局比彈性佈局更加強大，給出了許多優秀的佈局解決方案。

4）屬性簡寫

　　使用屬性簡寫，可以避免冗長的屬性宣告。當在大型樣式表中持續使用時，節省的空間將會很可觀。

.container {

  background-color: #FC0;

  background-image: url(lake.png);

  background-repeat: no-repeat;

  /* 簡寫 */

  background: #FC0 url(lake.png) no-repeat;

}

　　還有一種簡寫，可用短的屬性描述相同的功能，例如當只需要宣告background-color屬性，可用background替代。

.container {

  background-color: #FC0;

  /* 簡寫 */

  background: #FC0;

}

4）減少冗餘

　　將選擇器之間重複的屬性提取到一起，通過最小化屬性宣告的次數，來減少程式碼膨脹。

.main,

.side {

  margin: 20px;

  color: #F60;

}

5）偽元素

　　偽元素可簡化頁面的HTML結構，例如可用它來畫那些無關緊要的分隔線，或用偽元素清除浮動、增加計數器等。

6）CSS3屬性

　　CSS3提供了許多新屬性，可用來替換JavaScript或影象。

　　例如CSS3的border-radius屬性和border-shadow屬性，可以不用再借助影象實現圓角和陰影，不僅減少了與伺服器之間的通訊，還加快了開發速度。

　　再例如CSS3提供了濾鏡（filter）功能，不必再借助Canvas來實現濾鏡的功能。還有linear-gradient()函式用於繪製漸變。

7）動畫

　　很多動畫現在可以由CSS3屬性（animation和transition）實現，不必再借助JavaScript，減少了JavaScript的權重。由於瀏覽器對CSS3的原生支援，因此動畫也變得更加流暢。

　　animation常與transform結合，進行多層繪製，避免觸發影響渲染效能的重排和重繪。例如使用一個3D transform屬性將元素提升至合成層，進行GPU圖形處理加速。

.move {

  transform: translate3d(0,0,0);

}

8）will-change

　　will-change屬性會告知瀏覽器該元素會有哪些變化，讓瀏覽器在元素屬性真正發生變化之前提前做好對應的優化準備工作。

　　例如將一部分複雜的計算工作提前準備好，加快頁面反應速度。

三、程式碼組織

1）請求和位置

　　用link元素載入CSS可實現並行請求，並且將CSS檔案放置在head中儘早載入，防止無樣式的內容閃爍，加快初始頁面載入時的渲染速度。

2）減少base64

　　有時候會將一些小圖示轉換成base64內嵌到CSS檔案中，雖然這樣減少了通訊，但是會讓CSS檔案極速膨脹，需要做適當地權衡。

3）內聯樣式

　　如果CSS檔案的內容很少，那麼可以直接將其內聯到HTML結構中。雖然對快取不利，但對首次載入有很大的作用。

4）殭屍程式碼

　　殭屍程式碼是指存在但沒有使用的程式碼，需要將它們刪除。CSS中的殭屍程式碼具體表現為：沒有使用的宣告塊、重複的宣告塊和宣告語句。

5）分類

　　按照樣式產生作用的順序組織CSS程式碼。

　　1. 通用樣式，用來設定基準，以消除不同瀏覽器之間的不一致性。

　　2. 基礎樣式，為網站的所有元素提供基本的樣式，例如留白（margin和padding）、字型、顏色等。

　　3. 元件樣式，添加了樣式的元素或元素組合，例如進度條、彈框等。

　　4. 結構化樣式，用來建立網頁的佈局，常用於定義尺寸。

　　5. 功能性樣式，所有樣式中最精確的樣式，為滿足單一目的而實現的樣式。

　　6. 瀏覽器特定樣式，只對特定的瀏覽器生效，通常不夠優雅。

6）關鍵CSS

　　關鍵CSS是使用者會立即看到的內容樣式（即首屏樣式），需要儘快載入。可將首屏樣式提取到單獨的檔案中，或用工具將這些樣式內嵌到style元素中。

　　對於首屏以外的樣式，可通過preload載入，使其不阻塞渲染，如下所示，使用as來指定將要預載入的內容型別。

<link rel="preload" href="style.css" as="style">

7）CSS前處理器

　　CSS前處理器包括SASS和LESS，它們能為CSS提供了變數、函式、語句等程式設計特性，並引入了CSS模組化的功能。即使專案規模擴大，也能處理的遊刃有餘。

8）方法論

　　CSS方法論是一種面向CSS、由個人和組織設計、已被諸多專案檢驗且公認有效的最佳實踐。

　　這些方法論都會涉及結構化的命名約定，並且在組織CSS時可提供相應的指南，從而提升程式碼的效能、可讀性以及可維護性。

　　目前比較流行的三種CSS方法論：OOCSS、BEM和SMACSS。