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

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

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

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

1. 可預(yù)測(cè)：可以對(duì)軟件的工作方式和結(jié)構(gòu)做出準(zhǔn)確的假設(shè)
2. 可復(fù)用：在多處使用同一代碼，無(wú)需重寫
3. 可擴(kuò)展：比較容易的增加新內(nèi)容
4. 可維護(hù)：修改一處代碼不用大規(guī)模的改動(dòng)其他代碼

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

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

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

!important 優(yōu)先級(jí)最高，可覆蓋行內(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ū)е略匾苿?dòng) */  padding-bottom: 0;}/* @deprecated */.nav-link {  ...}

保持選擇器的簡(jiǎn)單

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

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

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

分離 CSS 和 JavaScript

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

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

ID和類名要有意義

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

盒子的尺寸計(jì)算方法有 content-box 和 border-box ，推薦在一個(gè)項(xiàng)目中堅(jiān)持使用一種方法，例如：

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

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

為樣式分類

按用途定義樣式，有助于創(chuàng)建更優(yōu)秀的架構(gòu)，因?yàn)閷邮浇M織為不同的類別，促使代碼可預(yù)測(cè)性更強(qiáng)，更易于復(fù)用。

通用樣式

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

表現(xiàn)一致。

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

基礎(chǔ)樣式

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

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

組件樣式

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

1. 定義需要實(shí)現(xiàn)的行為，即該組件達(dá)到的效果，組織 HTML 結(jié)構(gòu)
2. 為組件里的元素增加樣式，確保復(fù)用性
3. 根據(jù)需要，改寫元素容器的樣式。如確認(rèn)按鈕，警告按鈕，成功按鈕等，定義組件的容器元素不同的類名
4. 尺寸在組件的父元素中設(shè)置

功能樣式

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

.hidden {  display: none !important;}

瀏覽器特定樣式

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

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

維護(hù)代碼

代碼規(guī)范

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

模式庫(kù)

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

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

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)生作用的順序再來(lái)組織一下 CSS 代碼：

1. 通用樣式：設(shè)定基準(zhǔn)，消除不同瀏覽器之間的不一致性
2. 基礎(chǔ)樣式：為網(wǎng)站所有元素提供基本的樣式，如顏色、間距、行高、字體等，不需要重寫
3. 組件及容器樣式：以上一步的基礎(chǔ)樣式為基礎(chǔ)，用類定義樣式
4. 結(jié)構(gòu)化樣式：該樣式常用來(lái)創(chuàng)建布局，定義尺寸等
5. 功能樣式：最精確的樣式，滿足單一目的而實(shí)現(xiàn)的樣式，如警告框樣式
6. 瀏覽器特定樣式

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

重構(gòu)前審查 CSS

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

1. 所用到的屬性列表
2. 顏色數(shù)量
3. 使用的最高和最低選擇器優(yōu)先級(jí)
4. 選擇器長(zhǎng)度

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

重構(gòu)策略

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

（1）刪除僵尸代碼：

沒(méi)有使用的聲明塊、重復(fù)的聲明塊和聲明語(yǔ)句。

（2）分離 CSS 和 JavaScript

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

如果一個(gè)類型選擇器使用過(guò)多次，新建一條規(guī)則集，找到最常用的屬性，添加到新的規(guī)則集。從其他規(guī)則集刪除重復(fù)的屬性，因?yàn)樗鼈兛梢岳^承新定義的基礎(chǔ)樣式。

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。