CSS代碼重構(gòu)的示例分析

小編給大家分享一下CSS代碼重構(gòu)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1. 重構(gòu)和架構(gòu)

重構(gòu)是指在不改變代碼行為的前提下，重寫代碼，使其更加簡潔、易于復(fù)用。

架構(gòu)是指軟件項目的各個不同部件之間的組合方式。

優(yōu)秀的架構(gòu)：

1. 可預(yù)測：可以對軟件的工作方式和結(jié)構(gòu)做出準確的假設(shè)

2. 可復(fù)用：在多處使用同一代碼，無需重寫

3. 可擴展：比較容易的增加新內(nèi)容

4. 可維護：修改一處代碼不用大規(guī)模的改動其他代碼

2. CSS選擇器的優(yōu)先級

用（a, b, c, d）表示，優(yōu)先級 a>>b>>c>>d，其中：

1. 有行內(nèi) style 屬性時，a=1,否則 a=0

2. b 為 ID 選擇器的數(shù)量

3. c 為類選擇器、屬性選擇器、偽類的數(shù)量

4. d 為類型選擇器、偽元素的數(shù)量

（ps：偽類和偽元素的區(qū)別）

!important 優(yōu)先級最高，可覆蓋行內(nèi)樣式。不可以添加到行內(nèi)樣式屬性中。

3. 如何編寫優(yōu)質(zhì)的 CSS

使用注釋

注釋記錄的內(nèi)容包括：

1. 文件內(nèi)容

2. 選擇器的依賴、用法

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

4. 不應(yīng)繼續(xù)使用的廢棄樣式

/*
* 導(dǎo)航鏈接樣式
*
* @see templates/nav.html
*/
.nav-link {
  ...
}

.nav-link:hover {
  border-bottom: 4px solid #333;
  /* 防止增加了4px下邊框?qū)е略匾苿?nbsp;*/
  padding-bottom: 0;
}

/* @deprecated */
.nav-link {
  ...
}

保持選擇器的簡單

/* 不推薦 */
div > nav > ul > li > a {}
/* 不推薦 */
a.nav-link {}
/* 推薦 */
.nav-link {}

但是并不是任何場景都應(yīng)遵循該推薦，如下為輸入框的文本和邊框增加樣式。

.error {
  color: #f00;
}
input.error {
  border-color: #f00;
}

分離 CSS 和 JavaScript

JavaScript 中用來選擇元素的類和 ID， 不應(yīng)該 再用來為元素添加樣式。用 JavaScript 修改元素樣式時，應(yīng)該通過增加和刪除 類 來實現(xiàn)。

推薦在只用于 JavaScript 的類和 ID 前添加 js- ，或者 ID 只用于 JavaScript 選擇元素，類用于樣式。

ID和類名要有意義

創(chuàng)建更好的盒子

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

*,
*::after,
*::before {
}

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

為樣式分類

按用途定義樣式，有助于創(chuàng)建更優(yōu)秀的架構(gòu)，因為將樣式組織為不同的類別，促使代碼可預(yù)測性更強，更易于復(fù)用。

通用樣式

因為不同瀏覽器的默認樣式有些許差別，所以需要 通用樣式 為各種元素的屬性設(shè)置默認值樣式，使其在不同瀏覽器

表現(xiàn)一致。

推薦 Nicolas Gallagher 和 Jonathan Neal 開發(fā)的normalize.css，可根據(jù)自己的項目適當刪減。

基礎(chǔ)樣式

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

HTML 元素可分為：區(qū)塊元素、標題和文本元素、錨點元素、文本語義元素、列表、表格、表單等等，不同的元素在基礎(chǔ)樣式的設(shè)置上稍有不同，可參考 元素基礎(chǔ)樣式表 。

組件樣式

組件重要的是可復(fù)用性，如：按鈕、下拉菜單、模態(tài)框、選項卡等。

1. 定義需要實現(xiàn)的行為，即該組件達到的效果，組織 HTML 結(jié)構(gòu)

2. 為組件里的元素增加樣式，確保復(fù)用性

3. 根據(jù)需要，改寫元素容器的樣式。如確認按鈕，警告按鈕，成功按鈕等，定義組件的容器元素不同的類名

4. 尺寸在組件的父元素中設(shè)置

功能樣式

合理使用 !important 定義類屬性，在 JavaScript 操作樣式時使用。如添加下面這個類來實現(xiàn)元素隱藏：

.hidden {
  display: none !important;
}

瀏覽器特定樣式

盡管未來瀏覽器行為趨于統(tǒng)一，但目前一些老的瀏覽器仍然有怪癖行為。我們不得不使用一些 hack 的樣式來解決這些怪癖行為，推薦將這些樣式單獨放在一個樣式表中，并用 條件注釋 添加引用。

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

維護代碼

代碼規(guī)范

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

模式庫

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

推薦幾個優(yōu)秀的模式庫：

1. Mailchimp's Pattern Library

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

3. Code For America

代碼的組織和重構(gòu)策略

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

之前我們?yōu)闃邮椒诸?，現(xiàn)在我們按照產(chǎn)生作用的順序再來組織一下 CSS 代碼：

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

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

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

4. 結(jié)構(gòu)化樣式：該樣式常用來創(chuàng)建布局，定義尺寸等

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

6. 瀏覽器特定樣式

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

重構(gòu)前審查 CSS

如下審查非常有助于重構(gòu)：

1. 所用到的屬性列表

2. 顏色數(shù)量

3. 使用的最高和最低選擇器優(yōu)先級

4. 選擇器長度

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

重構(gòu)策略

推薦多次小范圍重構(gòu)，避免大范圍重構(gòu)引入錯誤。

（1）刪除僵尸代碼：

沒有使用的聲明塊、重復(fù)的聲明塊和聲明語句。

（2）分離 CSS 和 JavaScript

（3）分離基礎(chǔ)樣式

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

/* 重構(gòu)前 */
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;
}

/* 重構(gòu)后 */
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）定義可復(fù)用的組件，刪除重復(fù)的 CSS

（6）刪除行內(nèi) CSS

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