1. 重構和架構

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

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

優(yōu)秀的架構：

1. 可預測：可以對軟件的工作方式和結構做出準確的假設
2. 可復用：在多處使用同一代碼，無需重寫
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ù)量

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

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

使用注釋

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

1. 文件內(nèi)容
2. 選擇器的依賴、用法
3. 使用特定聲明的原因（hack等）
4. 不應繼續(xù)使用的廢棄樣式

/** 導航鏈接樣式** @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 修改元素樣式時，應該通過增加和刪除 類 來實現(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)秀的架構，因為將樣式組織為不同的類別，促使代碼可預測性更強，更易于復用。

通用樣式

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

表現(xiàn)一致。

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

基礎樣式

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

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

組件樣式

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

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

功能樣式

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

.hidden {  display: none !important;}

瀏覽器特定樣式

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

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

維護代碼

代碼規(guī)范

代碼規(guī)范是將良好的代碼編寫方法記錄下來形成指南，以鼓勵團隊所有成員以相同的方法編寫代碼。規(guī)范應定期審閱和更新。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

代碼的組織和重構策略

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

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

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

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

重構前審查 CSS

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

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

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

重構策略

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

（1）刪除僵尸代碼：

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

（2）分離 CSS 和 JavaScript

（3）分離基礎樣式

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

/* 重構前 */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）刪除行內(nèi) CSS

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網(wǎng)。