優化 CSS 代碼的 12 個小技巧

大家好，我是 CUGGZ。

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

1. 避免高消耗屬性

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

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

2. 使用 代替 @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;
}
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/CctmY6NS2zQY8d7l7O2dpg

猜你喜歡