優化 CSS 代碼的12個小技巧

今天來分享 12 個優化 CSS 代碼小技巧！

1. 避免高消耗屬性

分析表明，一些CSS屬性的渲染速度比其他屬性慢，因此應該謹慎使用。包括以下屬性：

• box-shadow
• border-radius
• position: fixed
• transform
• :nth-child
• filter

上述屬性都是對性能要求比較高的。如果這些屬性使用較少，那這就不是問題。但是如果一個頁面出現幾百次，那么整體的CSS可能會受到影響，所以要謹慎使用。

2. 使用 <link> 代替 @import

@import 規則主要用于導入資源或者CSS文件。它會阻止其他文件并行下載，并可能會導致網站速度變慢。

? 不要在CSS中這樣操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多個HTML 中的<link>標簽來代替@import，它將并行加載CSS文件，可以在一定程度上提高應用的加載的速度。

? 可以在HTML這樣操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 簡化選擇器

我們知道，有很多方法可以對 HTML 元素進行樣式設置，而最復雜的 CSS 選擇器可能需要幾毫秒的時間來解析。降低選擇器的復雜性就可以減少瀏覽器的負載并保持代碼簡潔明了。

? 避免這么寫：

.container > div.links-container ul li .link {

}

? 可以這么寫：

.container .link {

}

4. 避免使用 !Important

在一些時候，可以使用!Important 來提高樣式的優先級，以使樣式生效。除非沒有別的辦法，否則不要使用!Important。

添加 !Important CSS聲明將覆蓋掉其他對應的樣式聲明，如果CSS的規則中 !Important 太多，瀏覽器就必須對代碼進行額外的檢查，這可能會降低頁面的加載速度。所以，盡量避免使用!Important。在很多情況下我們是可以通過選擇器來實現樣式重寫的，除非是想要對第三方庫的CSS進行重寫。

5. CSS實現特效和SVG代替圖片

頁面中加載圖像很可能需要很長的時間，尤其是在圖像未針對web進行優化的情況下。在實現背景圖、漸變、幾何圖形時，盡量少使用圖片，而是使用CSS代碼實現。使用 CSS 代碼實現就會比圖片加載速度更快。

還可以使用SVG來代替PNG或者JPG圖片：

• 可以給圖片添加效果；
• 圖像加載速度更快；
• 圖像自動適應用戶屏幕。

6. 壓縮 CSS

我們可以通過壓縮CSS文件來刪除文件中所有的空白和不必要的代碼來減少文件的大小。CSS文件變小了，加載的時間自然就變少了，頁面的加載速度就會變。

7. 使用0而不是0px

當一個屬性的值為0時，我們可以不添加任何單位。即不要這么寫：0rem，0em，0px等。

當然，這么寫是沒有錯的，但是這些單位是沒有用的，當處理一個巨大的CSS文件時，沒有單位會比有單位時文件小一點。

8. 使用十六進制而不是顏色名稱

當我們將顏色設置為顏色名稱時，瀏覽器就會花費更多時間來找出顏色的十六進制值。假如想使用紅色，那設置為color:red之后，不同的瀏覽器顯示效果可能是不一樣的，作為開發人員，我們不能讓瀏覽器來決定網頁將如何顯示。

因此，盡量使用使用十六進制（例如紅色#ff0000）來定義顏色，就能確保在所有瀏覽器中以相同的色調準確得顯示想要的顏色。

9. 避免過多 font-family

為每個選擇器去定義字體并不是一個好的辦法，它會導致代碼很難維護，假如以后想要更改字體，就不得不在每個選擇器中更改它。

因此不要像下面這樣來定義字體：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定義要使用的字體，如果想要在其他選擇器中覆蓋該字體，就可以通過在該選擇器中使用所需的字體來實現：

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family: "Times New Roman", Times, serif";
}

如果頁面中很多部分的字體都不盡相同，就可以將字體定義在 class 中，然后在需要的HTML標簽上使用該class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif";
}

10. 使用備用字體

有些情況下，應用中使用的字體可能在用戶設備上不可用。在這種情況下，可以指定使用其他備用字體：

p{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

這樣，瀏覽器就會按順序進行解析，直到解析到第一個可用的字體，如果都不可用，就會使用瀏覽器的默認字體。

11. 使用 CSS 重置

每個瀏覽器都有自己的 HTML 元素默認樣式。假如有一個沒有任何樣式的 H1 元素，那么在默認情況下，在Firefox中，會給它一個上下為21.433px，左右為 0 的margin值。而在Safari中，會給它一個上下為21px，左右為 0 的margin值。

因此，重置CSS樣式，一個很好的做法就是從頭開始定義樣式。很多開發人員會使用通用選擇器（*）來執行基本重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在使用通用選擇器 (*) 進行重置有時會導致性能問題，因為它會針對每個標簽去設置其樣式。

可以使用一些常用的CSS重置代碼庫，比如normalize。也可以參考一些CSS重置的最佳實踐。

12. 減少重復代碼

當兩個元素或選擇器具有相同的 CSS 屬性時，可以使用逗號來組合這些選擇器，而不是重復聲明樣式，這樣它們將共享 CSS 樣式。

? 避免這樣寫：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}

.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

? 建議這樣寫：

.header,
.footer {
  background-color: #fefefe;
  padding: 20px 0;
}