Web前端開發最佳實踐（9）：CSS代碼太太亂，重複代碼太多？你須要精簡CSS代碼

時間 2019-11-11

標籤 web 前端開發最佳實踐 css 代碼太太重複太多須要精簡欄目 HTML 简体版

原文原文鏈接

前言

提升網站總體加載速度的一個重要手段就是提升代碼文件的網絡傳輸速度。以前提到過，全部的代碼文件都應該是通過壓縮了的，這可提升網絡傳輸速度，提升性能。除了壓縮代碼以外，精簡代碼也是一種減少代碼文件大小的手段。如下將討論CSS代碼相關的代碼精簡方案。css

定義簡潔的CSS規則

CSS的每條規則中都包含了規則的屬性及屬性值。定義簡潔的CSS規則主要是指合併相關規則和定義簡潔的屬性值。html

1. 合併相關CSS規則

CSS中的某些樣式是由多個規則組成的，好比字體樣式，就包含：font-family、font-style、font-size、font-variant、font-weight及line-height。以下是使用這些規則定義一個元素的字體樣式：前端

p.reader-title {
font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    line-height: 30px;
}

其實，這些字體相關的樣式規則能夠合併爲一個樣式規則，即font樣式。以下是合併後的樣式：瀏覽器

p.reader-title {
    font:italic bold 12px/30px Georgia, serif;
}

合併後的樣式更簡潔，代碼量縮減了不少。相似的樣式還有：background、border、margin、padding、text、list-style、transform、transition、animation等。能夠在CSS規範中查看各樣式對應的子規則。網絡

2. 定義簡潔的屬性值

在CSS樣式中，有些屬性值可使用更簡潔的方式來展現，好比顏色和尺寸：工具

p.reader-title {
    color: #FFFFFF;
    font-size: 0.8em;
    padding: 0em;
}

顏色值#FF33EE能夠簡化爲#F3E，尺寸值0.8em能夠省略小數點以前的0，即簡化爲.8em。若是尺寸值爲0，則能夠省略單位。通過簡化後，上面的樣式定義即爲：性能

p.reader-title {
    color: #F3E;
    font-size: .8em;
    padding: 0;
}

合併相同的定義

不少時候在CSS代碼中，定義的規則會有相同的部分。能夠合併這些相同的樣式定義，達到代碼重用和縮減代碼的目的。好比以下的CSS代碼：開發工具

.library-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 1.2em;
    line-height: 2em;
}
.search-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 1.4em;
    line-height: 2.5em;
}

以上的代碼中，定義了兩個CSS規則，這兩個規則中大部分的定義是相同的，在這種狀況下，便可合併定義這些相同部分，優化後的代碼以下：字體

.library-title,.search-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
}
.library-title {
    font-size: 1.2em;
    line-height: 2em;
}
.search-title {
    font-size: 1.4em;
    line-height: 2.5em;
}

在CSS中，有些屬性是能夠繼承的，好比color、font、line-height、list-style、text-align、text-indent、text-transform 等。若是某個父元素的多個子元素上設置了相同的可繼承屬性定義，則能夠把相同的定義合併，且設置在父元素上。在網頁設計中常見的問題是在CSS代碼中字體設置混亂，而且會重複設置相同的字體。通常狀況下，同一個網頁中會有一個主要的字體，只須要把這個主字體設置在網頁的body標籤上便可。個別子元素的字體和主字體不一樣，則單獨定義便可覆蓋主字體。優化

刪除無效的定義

CSS代碼中的無效定義，並不會影響頁面的功能展現，但會影響頁面展現的性能。無效的定義在增長代碼量的同時，也增長了瀏覽器對樣式的解析時間，瀏覽器會根據CSS樣式構建樣式樹，樣式樹中固然也包括了無效的樣式。

無效的定義包括無效的規則及無效的樣式屬性。無效的規則通常是在開發過程當中引入的，好比，在開發過程當中，失效的CSS規則並無獲得及時的刪除，而從直觀上沒法判斷某個CSS規則是否已經失效，這應該也是CSS規則沒有被刪除的緣由之一。對於這種狀況，可使用工具來進行查找，好比，用Chrome瀏覽器自帶的開發工具就能夠查找CSS代碼中的無效樣式，以下圖所示。

圖使用Chrome瀏覽器自帶的開發工具查找無效樣式規則的結果圖

固然，查找的結果只能做爲參考，由於不少時候CSS規則對應的模塊並無加載，或者有些元素上的CSS類是經過JavaScript代碼動態設置的，這須要在刪除規則時仔細考慮。

無效的樣式屬性指的是設置的樣式並無起做用。好比設置內邊距爲負值等，以及一些因手誤引發的屬性值拼寫錯誤等。以下是一些常見的無效樣式屬性：

.invalid-css {
    padding-top:-20px;/* 無效的屬性值 */
    border: 1px soild #DDD;/* 拼寫錯誤 */
}

一樣，使用Chrome自帶的開發工具能夠檢測無效的屬性定義，下圖是使用此工具的一個檢測結果。

圖使用Chrome瀏覽器自帶的開發工具查找無效樣式屬性及屬性值的結果圖

使用此工具須要注意的是，工具檢測時列出了Chrome沒法識別的CSS屬性或者選擇器，某些屬性或者選擇器是爲其餘瀏覽器添加的，並非真正的無效定義，好比以上圖中的選擇器input:-ms-input-placeholder等。

附錄

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。