CSS重構：樣式表性能調優

CSS重構：樣式表性能調優

這兩天窩在家裏又看了本CSS相關的書：《CSS重構：樣式表性能調優》。重構是指在不改變代碼行爲的前提下，重寫代碼，使其更加簡潔、易於複用。

這本書讀起來比較快，可挑自己感興趣的讀，前面三章是基礎知識的介紹，都瞭解的話可直接跳過。第四章是爲樣式分類，我比較感興趣的是第四章（測試）和第五章（代碼的組織和重構策略）。

一、測試
測試時需要考慮很多因素，其中包括以下幾點：

1、正在用什麼瀏覽器測試網頁？

2、如何在不同的操作系統上測試各種各樣的瀏覽器？

3、正在多大的窗口瀏覽網頁？

4、如何快速測試大量網頁？

5、如何驗證你所看到的效果是正確的？

6、如果你無法獲得某些設備，如何測試網站在這些設備上的效果？

1）測試多個瀏覽器

最常用的測試 CSS 在不同瀏覽器中顯示效果的方法是人工測試，主流瀏覽器包括Chrome、Firefox、Safari、Microsoft Edge等。

爲了測試 CSS 在移動端的效果，需要從合適的應用市場下載適合於設備的各種瀏覽器。

1、要用iOS系統的Safari瀏覽器測試， 可以使用iOS原生設備或Xcode的iOS模擬器。

2、安卓設備可以用 Android Studio 的模擬器測試。

2）第三方測試服務

除了自己測試，還可以使用第三方提供的種類豐富的測試服務。它們能夠滿足測試網站在任意瀏覽器或其他配置環境中的效果的需求，同時還提供類似共享測試階段信息、人工測試多種瀏覽器和截圖等功能。

下面列出的幾種第三方服務，有些可免費試用一段時間或提供幾種級別的免費服務：

1、BrowserStack

2、Sauce Labs

3、Browserling

4、Litmus

3）視覺迴歸測試

視覺迴歸測試是一種測試方法，它通過比較作爲基準的用戶界面圖像和開發過程同一用戶界面的圖像，來檢測不符合預期的改動（迴歸）。視覺迴歸測試非常耗時，因爲需要測試的瀏覽器很多，一有改動就進行這種測試，測試工作量很大。此外，肉眼難以確定元素在空間位置上的變化。視覺迴歸測試有如下技巧：

1、測試重要的點，例如一旦基礎樣式定義好，就不大可能因爲改動它們而引入錯誤；但是更爲複雜、更加脆弱的可用性組件則是需要重點測試的。

2、保持足夠細緻的粒度，每次只測單個組件。

3、用多種瀏覽器進行視覺迴歸測試，因爲不同瀏覽器之間可能存在不一致現象，即不要嘗試比較不同瀏覽器的截圖。

Gemini項目是Yandex團隊開發的視覺迴歸測試工具。使用該工具，可以編寫腳本，自動截取網站在主流瀏覽器中的截圖，然後將其與基準圖像比較，不同之處將以高亮形式標記出來。

除了 Gemini， 還有多種視覺迴歸測試工具， 其中最常用的兩個是Wraith和PhantomCSS。前者由BBC開發，後者由Huddle公司的James Cryer帶領開發團隊編寫，它們能打開網站，能用PhantomJS（基於WebKit的無頭瀏覽器）或 SlimerJS（基於Gecko的無頭瀏覽器）截圖，能對比網頁現有元素的截圖跟元素基準圖像之間的差異。

二、維護代碼
代碼的測試跟編寫同等重要。不斷維護已有代碼，提高其質量，其重要性不亞於編寫新代碼。

1）編碼規範

編碼規範是指將良好的代碼編寫方法記錄下來形成指南，以鼓勵團隊所有成員以相同的方式編寫代碼。CSS 編碼規範通常指定了註釋、格式、命名和選擇器用法方面的規範，其詳略程度可根據實際情況自行調整。

（1）註釋

A. 應該在每個文件的開頭添加註釋，說明文件的內容。

/**

• 該文件包含選項卡組的樣式。
• 選項卡組應僅包含擁有tab類的元素。
  */

B. 易於混淆的屬性，應用註釋予以說明。

.tab-group-flush {
display: block;
margin-left: -12px; / 清除父容器的padding值 /
margin-right: -12px; / 清除父容器的padding值 /
}
（2）格式

A. 規則集應該滿足下列要求。

1、有多個屬性時，每個屬性佔一行。

2、規則集聲明塊中的每條聲明縮進 4 個空格。

.selector {

property1: value;
property2: value;

}
B. 聲明語句應該滿足下列要求。

1、冒號後面加1個空格。

2、必須以分號結尾。

.selector {

property1: value;

}
C. background-position各個屬性值不同時，可以將兩個屬性值放在一行。

.selector1 { background-position: 0 0; }
.selector2 { background-position: 0 -10px; }
.selector3 { background-position: 0 -10px; }
D. 規則集和聲明末尾的空格必須刪除。

（3）選擇器命名規範

A. 只允許使用小寫字母。

.selector {}
B. 包含多個單詞的選擇器必須使用脊柱狀形式（用連字符連接單詞）。

.selector-with-multiple-words {}
C. 禁止用ID爲元素添加樣式，應該使用類。

.element-to-style {}
D. 用JavaScript修改樣式（不管用什麼框架），都必須通過增加或刪除CSS類來完成。

/**

• 正確：用 JavaScript 爲元素添加類，修改元素的樣式。
  */

$(".js-menu-item").on("click", function(e) {
$(this).addClass("highlighted");
});
E. 用作 JavaScript 選擇器的類和 ID ，必須添加 js- 前綴，並嚴禁在樣式表中使用。

/**

• 正確：在JavaScript中，用專門用作JavaScript選擇器的類選擇元素。
  */

$(".js-menu-item").on("click", function() {
$(this).addClass("highlighted");
});
F. 必須使用有意義的類名。

/ 正確：類的命名有意義且描述清楚。 /
.resident {}
G. 類名必須描述爲什麼元素添加樣式，而不是怎樣添加樣式。

/ 正確：類的命名描述的是爲什麼元素添加樣式。 /
.sidebar-important {}
（4）屬性

A. 屬性的簡寫形式只可用於border、margin和padding。

/ 正確：僅border屬性使用了簡寫形式。 /
.selector {

border: 1px solid #000000;
font-family: Arial, sans-serif;
font-size: 12px;

}
B. 屬性必須按照字母順序排列。

.selector {

border: 1px solid #000000;
margin: 24px;
padding: 12px;

}
C. 屬性值爲0時，必須省略單位。

.selector {

border: 1px solid #000000;
margin: 0;
padding: 0;

}
更多編碼規範方面的啓示，請見下面這些規範：

1、Google CSS編碼規範

2、18F前端指南

2）模式庫

模式庫 （有時也稱樣式指南）是網站使用的一組用戶界面模式，它展示了每種模式相關的重要信息，其中包括以下幾點：

1、何時（不）使用模式的指導。

2、解釋模式使用方式的示例代碼。

3、使用某一模式而不用另一模式的原因。

模式庫有如下幾個優點。

1、首先，模式庫將網站所有組件彙集到一起。參與項目的所有成員都能瞭解到搭建網站的各個模塊，確保他們熟悉其背後的原理。讓每個人都熟悉一組可複用的模式，還能加快開發速度，因爲開發新項目時，無需從頭重新開發這些構建模塊。

2、模式庫將所有組件彙集到一起，還有助於保證用戶界面的一致性。使用模式庫對設計團隊也能起到幫助作用，因爲需要修改組件的樣式時，在現有模式的基礎上做修改即可。模式庫爲設計工作提供約束條件，鼓勵設計師在現有模式的基礎上設計新的元素，這進一步強化了用戶界面應該保持一致的設計理念。

3、最後，模式庫將網站的所有組件都彙集到一起，使識別不一致的組件變得更加容易。編寫的新代碼可能影響到用戶界面效果，在提交代碼之前，藉助模式庫，可從視覺上快速識別錯誤。修改模式後，若網頁看起來有問題，有了模式庫，診斷問題將更加容易，因爲模式庫是模式的最簡單應用形式。

Yelp和MailChimp的模式庫在各個方面都做得非常出色。關於模式庫的更多資源，請見styleguides.io， 該網站提供相關示例、文章、圖書和播客。

三、代碼的組織和重構策略
1）按照樣式從最不精確到最精確組織 CSS

CSS 樣式根據選擇器的特指度和樣式的順序產生作用。因此，有必要按照樣式產生作用的順序組織 CSS 代碼。

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

2、基礎樣式，爲網站的所有元素提供基本的樣式。留白（ margin、padding和line-height等）、字體及其大小等樣式。

3、組件及其容器的樣式，滿足網站範圍內的大多數應用場景，樣式上的任何調整都應該交由父容器處理。

4、結構化樣式，包括組件及其容器的樣式。 該類樣式用來創建網頁的佈局，並常用於定義尺寸。

5、功能性樣式，所有樣式中最精確的樣式。 JavaScript所使用的添加 !important 語句的類就屬於這類樣式，其他爲滿足單一目的而實現的樣式也屬於該類。

6、瀏覽器特定樣式（如果一定需要），只對特定的瀏覽器生效。通常不夠優雅，因此不再使用時，一定要將其刪除。

按照以上順序添加 CSS， 隨着聲明塊選擇器的精確度提高，更爲複雜的選擇器將與已經添加的更加寬泛的選擇器區分開來。

2）多個文件還是一個大文件

代碼的組織方式有兩種，即將代碼置於多個文件或只用一個大文件。代碼放置位置要易於開發人員查找，這一點很重要，並且同樣非常重要的是，這樣做有助於網站快速加載以滿足終端用戶的需要。

1、儘可能地使需要下載的 CSS 文件縮小，以便提高加載速度。

2、小型項目用一個 CSS 文件完全可以接受，合理地將 CSS 文件內容劃分爲幾個大塊，每個大塊下再恰當安排小塊內容，併合理添加註釋。

/**

• 通用樣式

• ---

  */

/**

• 基礎樣式

• ---

  */

/ 基礎樣式：表單 /
/ 基礎樣式：標題 /
/ 基礎樣式：圖像 /
3、開發網站時使用多個 CSS 文件，各個文件所包含的樣式可以分別服務於網站的某一部分功能，從而可以避免將 CSS 添加到不恰當的位置。

|-css/ |
|-normalizing-styles |
| |- normalize.css |
| |
|-base-styles |
| |- forms.css |
| |- headings.css |
| |- images.css |
| |- lists.css |
| |- tables.css |
| |- etc. |
| |
|-component-styles |
| |- alerts.css |
| |- buttons.css |
| |- carousel.css |
| |- dropdowns.css |
| |- modals.css |
| |- etc. |
| |
|- structural-styles |
| |- layout-checkout.css |
| |- layout-sidebar.css |
| |- layout-primary.css |
| |- layout-settings.css |
| |- etc. |
| |
|- utility-styles |
| |- utility.css |
| |
|- browser-specific-styles |
| |-ie8.css
3）重構前審查CSS

從以下更高的角度來審查 CSS，將非常有助於重構：

1、所用到的屬性列表

2、使用某一特定屬性的聲明塊列表

3、使用的顏色數量

4、使用的最高和最低特指度

5、擁有最高和最低特指度的選擇器

6、選擇器的長度

CSS Dig是 Google Chrome 瀏覽器的一款免費插件， 你可以用它獲取到以上信息。

4）重構策略

條件允許的話， 應該只對你能夠維護的小塊代碼進行重構，並做到經常評審和發佈。

1、保持規則集結構的一致性可以使開發更容易。請確定好聲明塊的格式和聲明語句的順序。 每條聲明語句可以各佔一行，並儘可能按照字母順序排列。

2、刪除殭屍代碼，殭屍代碼是指存在但沒有使用的代碼，包括沒有使用的聲明塊、重複的聲明塊和聲明語句。

3、分離CSS和JavaScript，搜索JavaScript代碼， 找到選取元素的位置， 然後在選擇器前面添加 js- ，同時將該選擇器添加到HTML代碼中定義該元素的位置。

4、分離基礎樣式，將基礎樣式分爲以下不同類別：

標題（

–

）
文本（例如：

、和）
超鏈接（）
列表（

、和）
表格（例如：、、、、和）
表單（例如：、、<fieldset>、和