CSS代碼重構的示例分析

小編給大家分享一下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

使用注釋

注釋記錄的內容包括：

1. 文件內容

2. 選擇器的依賴、用法

3. 使用特定聲明的原因（hack等）

4. 不應繼續使用的廢棄樣式

/*
* 導航鏈接樣式
*
* @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 代碼規范通常指定了注釋、格式、命名、選擇器用法等方便的規范。

模式庫

模式庫是網站使用的一組用戶界面模式，將所有組件匯集在一起。好處就是參與項目的成員都能了解到搭建網站的各個模塊，熟悉背后的原理，并且有助于保證用戶界面的一致性。

推薦幾個優秀的模式庫：

1. Mailchimp's Pattern Library

2. [Carbon Design System](http://carbondesignsystem.com/style/color/swatches)

3. Code For America

代碼的組織和重構策略

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

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

1. 通用樣式：設定基準，消除不同瀏覽器之間的不一致性

2. 基礎樣式：為網站所有元素提供基本的樣式，如顏色、間距、行高、字體等，不需要重寫

3. 組件及容器樣式：以上一步的基礎樣式為基礎，用類定義樣式

4. 結構化樣式：該樣式常用來創建布局，定義尺寸等

5. 功能樣式：最精確的樣式，滿足單一目的而實現的樣式，如警告框樣式

6. 瀏覽器特定樣式

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

重構前審查 CSS

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

1. 所用到的屬性列表

2. 顏色數量

3. 使用的最高和最低選擇器優先級

4. 選擇器長度

CSS Dig 是 Google Chrome 的一款插件，可以幫助獲取以上信息。

重構策略

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

（1）刪除僵尸代碼：

沒有使用的聲明塊、重復的聲明塊和聲明語句。

（2）分離 CSS 和 JavaScript

（3）分離基礎樣式

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

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

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

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

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

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

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

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

（4）刪除冗余的 ID

/* 不推薦 */
#main-header ul#main-menu {}
/* 推薦 */
#main-menu {}

（5）定義可復用的組件，刪除重復的 CSS

（6）刪除行內 CSS

以上是“CSS代碼重構的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！