CSS重構

kk124發表於2018-01-29
CSS

1. 重構和架構

重構是指在不改變程式碼行為的前提下，重寫程式碼，使其更加簡潔、易於複用。

架構是指軟體專案的各個不同部件之間的組合方式。

優秀的架構：

  1. 可預測：可以對軟體的工作方式和結構做出準確的假設
  2. 可複用：在多處使用同一程式碼，無需重寫
  3. 可擴充套件：比較容易的增加新內容
  4. 可維護：修改一處程式碼不用大規模的改動其他程式碼

2. CSS選擇器的優先順序

用（a, b, c, d）表示，優先順序 a>>b>>c>>d，其中：

  1. 有行內 style 屬性時，a=1,否則 a=0
  2. b 為 ID 選擇器的數量
  3. c 為類選擇器、屬性選擇器、偽類的數量
  4. d 為型別選擇器、偽元素的數量

（ps：偽類和偽元素的區別）

!important 優先順序最高，可覆蓋行內樣式。不可以新增到行內樣式屬性中。

3. 如何編寫優質的 CSS

使用註釋

註釋記錄的內容包括：

  • 檔案內容
  • 選擇器的依賴、用法
  • 使用特定宣告的原因（hack等）
  • 不應繼續使用的廢棄樣式
/*
* 導航連結樣式
*
* @see templates/nav.html
*/
.nav-link {
  ...
}

.nav-link:hover {
  border-bottom: 4px solid #333;
  /* 防止增加了4px下邊框導致元素移動 */
  padding-bottom: 0;
}

/* @deprecated */
.nav-link {
  ...
}
複製程式碼

保持選擇器的簡單

/* 不推薦 */
div > nav > ul > li > a {}
/* 不推薦 */
a.nav-link {}
/* 推薦 */
.nav-link {}
複製程式碼

但是並不是任何場景都應遵循該推薦，如下為輸入框的文字和邊框增加樣式。

.error {
  color: #f00;
}
input.error {
  border-color: #f00;
}
複製程式碼

分離 CSS 和 JavaScript

JavaScript 中用來選擇元素的類和 ID，不應該再用來為元素新增樣式。用 JavaScript 修改元素樣式時，應該通過增加和刪除類來實現。

推薦在只用於 JavaScript 的類和 ID 前新增 js-，或者 ID 只用於 JavaScript 選擇元素，類用於樣式。

ID和類名要有意義

建立更好的盒子

盒子的尺寸計算方法有content-box和border-box，推薦在一個專案中堅持使用一種方法，例如：

*,
*::after,
*::before {
}
複製程式碼

(ps: ::after表示法是在 CSS3 中引入的，::符號是用來區分偽類和偽元素的。支援CSS3的瀏覽器同時也都支援CSS2中引入的表示法:after，IE8僅支援:after)

為樣式分類

按用途定義樣式，有助於建立更優秀的架構，因為將樣式組織為不同的類別，促使程式碼可預測性更強，更易於複用。

通用樣式

因為不同瀏覽器的預設樣式有些許差別，所以需要通用樣式為各種元素的屬性設定預設值樣式，使其在不同瀏覽器

表現一致。

推薦 Nicolas Gallagher 和 Jonathan Neal 開發的 normalize.css，可根據自己的專案適當刪減。

基礎樣式

用型別選擇器和結合符（例如，ul ul表示ul下面的ul）或者偽類為 HTML 元素新增更加細緻的樣式。比如：color、font-family、font-size、letter-spacing、line-height、margin、padding等。

HTML 元素可分為：區塊元素、標題和文字元素、錨點元素、文字語義元素、列表、表格、表單等等，不同的元素在基礎樣式的設定上稍有不同，可參考 元素基礎樣式表。

元件樣式

元件重要的是可複用性，如：按鈕、下拉選單、模態框、選項卡等。

  1. 定義需要實現的行為，即該元件達到的效果，組織 HTML 結構
  2. 為元件裡的元素增加樣式，確保複用性
  3. 根據需要，改寫元素容器的樣式。如確認按鈕，警告按鈕，成功按鈕等，定義元件的容器元素不同的類名
  4. 尺寸在元件的父元素中設定

功能樣式

合理使用 !important 定義類屬性，在 JavaScript 操作樣式時使用。如新增下面這個類來實現元素隱藏：

.hidden {
  display: none !important;
}
複製程式碼

瀏覽器特定樣式

儘管未來瀏覽器行為趨於統一，但目前一些老的瀏覽器仍然有怪癖行為。我們不得不使用一些 hack 的樣式來解決這些怪癖行為，推薦將這些樣式單獨放在一個樣式表中，並用條件註釋新增引用。

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css" />
<![endif]-->
複製程式碼

維護程式碼

程式碼規範

程式碼規範是將良好的程式碼編寫方法記錄下來形成指南，以鼓勵團隊所有成員以相同的方法編寫程式碼。規範應定期審閱和更新。CSS 程式碼規範通常指定了註釋、格式、命名、選擇器用法等方便的規範。

可參考 CSS 程式碼規範。

模式庫

模式庫是網站使用的一組使用者介面模式，將所有元件彙集在一起。好處就是參與專案的成員都能瞭解到搭建網站的各個模組，熟悉背後的原理，並且有助於保證使用者介面的一致性。

推薦幾個優秀的模式庫：

程式碼的組織和重構策略

按照樣式從最不精確到最精確組織 CSS

之前我們為樣式分類，現在我們按照產生作用的順序再來組織一下 CSS 程式碼：

  1. 通用樣式：設定基準，消除不同瀏覽器之間的不一致性
  2. 基礎樣式：為網站所有元素提供基本的樣式，如顏色、間距、行高、字型等，不需要重寫
  3. 元件及容器樣式：以上一步的基礎樣式為基礎，用類定義樣式
  4. 結構化樣式：該樣式常用來建立佈局，定義尺寸等
  5. 功能樣式：最精確的樣式，滿足單一目的而實現的樣式，如警告框樣式
  6. 瀏覽器特定樣式

PS：媒體查詢要靠近相關宣告塊，這樣做可以為樣式是如何起作用的提供更多的背景資訊。

重構前審查 CSS

如下審查非常有助於重構：

  • 所用到的屬性列表
  • 顏色數量
  • 使用的最高和最低選擇器優先順序
  • 選擇器長度

CSS Dig 是 Google Chrome 的一款外掛，可以幫助獲取以上資訊。

重構策略

推薦多次小範圍重構，避免大範圍重構引入錯誤。

（1）刪除殭屍程式碼：

沒有使用的宣告塊、重複的宣告塊和宣告語句。

（2）分離 CSS 和 JavaScript

（3）分離基礎樣式

如果一個型別選擇器使用過多次，新建一條規則集，找到最常用的屬性，新增到新的規則集。從其他規則集刪除重複的屬性，因為它們可以繼承新定義的基礎樣式。

/* 重構前 */
body > div > h1 {
  color: #000;
  font-size: 32px;
  margin-bottom: 12px;
}

.section-condensed h1 {
  color: #000;
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}

/* 重構後 */
h1 {
  color: #000;
  font-family: Helvetica, san-serif;
  font-size: 32px;
  line-height: 1.2;
}

body > div > h1 {
  margin-bottom: 12px;
}

.section-condensed h1 {
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}
複製程式碼

（4）刪除冗餘的 ID

/* 不推薦 */
#main-header ul#main-menu {}
/* 推薦 */
#main-menu {}
複製程式碼

（5）定義可複用的元件，刪除重複的 CSS

（6）刪除行內 CSS

相關文章