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 代碼規範。

模式庫

模式庫是網站使用的一組用戶界面模式，將全部組件聚集在一塊兒。好處就是參與項目的成員都能瞭解到搭建網站的各個模塊，熟悉背後的原理，而且有助於保證用戶界面的一致性。

推薦幾個優秀的模式庫：

• Mailchimp's Pattern Library
• [Carbon Design System](http://carbondesignsystem.com/style/color/swatches)
• Code For America

代碼的組織和重構策略

按照樣式從最不精確到最精確組織 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