《CSS重構：樣式表性能調優》讀書筆記

一、什麼是優秀的架構

（1）優秀的架構是可預測的
（2）優秀的架構是可擴展的
（3）優秀的架構可提高代碼複用性
（4）優秀的架構可擴展
（5）優秀的架構可維護
何時能夠重構：僅當重構可以改善架構或使代碼符合編碼規範時，才應進行重構。

二、級聯

級聯是瀏覽器決定爲元素應用哪一種樣式的一種方法。
特指度度量的是 CSS 選擇器識別元素的精確性。計算特指度時須要分析這些選擇器（除了通用選擇器 *）。爲 (a, b, c, d) 中的各個變量賦予相應的數值，就能獲得特指度。
(1) 若是用 style 屬性應用樣式，則 a=1，不然 a=0。
(2) b 爲 ID 選擇器的數量。
(3) c 爲類選擇器、屬性選擇器和僞類的數量。
(4) d 爲類型選擇器和僞元素的數量。

三、編寫優質的css

（1）添加註釋

A. 應該在每一個文件的開頭添加註釋，說明文件的內容。

/**
 * 該文件包含選項卡組的樣式。
 * 選項卡組應僅包含擁有tab類的元素。
 */
B. 易於混淆的屬性，應用註釋予以說明。

.tab-group-flush {
    display: block;
    margin-left: -12px; /* 清除父容器的padding值 */
    margin-right: -12px; /* 清除父容器的padding值 */
}

（2）換行結構一致
多個屬性時，每一個屬性佔一行。每條聲明縮進4個空格。
（3）保持選擇器的簡單：若有多層的嵌套選擇，還不如直接加一個類
（4）高性能的選擇器：

web瀏覽器是從右向左匹配元素。
關鍵選擇器(選擇器最右邊的部分叫關鍵選擇器)。
選擇器只適用小寫字母。
用鏈接符鏈接單詞。
屬性按照字母順序排列。
屬性值爲0時，省略單位。

（5）分離css和javascript：在只適用於js的類或者ID前加js-；在js中用類修改元素屬性；
（6）類名要有意義
（7）對特殊的樣式，可採用條件註釋的方法

<!–-[if IE 7]>
  <link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

四、測試

測試多個瀏覽器。
Gemini（https://github.com/gemini-tes...）項目是 Yandex 團隊（https://www.yandex.com）開發的視覺迴歸測試工具。使用該工具，你能夠編寫腳本，自動截取網站在主流瀏覽器中的截圖，而後將其與基準圖像比較，不一樣之處將以高亮形式標記出來。

五、代碼的組織和重構策略

按照樣式從最不精確到最精確組織CSS
(1) 通用樣式
(2) 基礎樣式
(3) 組件及其容器的樣式
(4) 結構化樣式
(5) 功能性樣式
(6) 瀏覽器特定樣式（若是必定須要）
如單一css文件進行開發

/**
 * 通用樣式
 * ---------------------------------------------
 */

/**
 * 基礎樣式
 * ---------------------------------------------
 */

 /* 基礎樣式：表單 */
 /* 基礎樣式：標題 */
 /* 基礎樣式：圖像 */
 /* 基礎樣式：列表 */
 /* 基礎樣式：表格 */
 /* 等等 */

 /**
 * 組件樣式
 * ---------------------------------------------
 */

/* 組件樣式：消息框 */
/* 組件樣式：按鈕 */
/* 組件樣式：輪播框 */
/* 組件樣式：下拉框 */
/* 組件樣式：模態框 */
/* 等等 */

/**
 * 結構化樣式
 * ---------------------------------------------
 */

/* 結構化樣式：結算區域的佈局 */1
/* 結構化樣式：側邊欄的佈局 */
/* 結構化樣式：主區域的佈局 */
/* 結構化樣式：我的設置區域的佈局 */
/* 等等 */

/**
 * 功能樣式
 * ---------------------------------------------
 */

如多個css文件進行開發

|-css/
| |-normalizing-styles
| |    |- normalize.css
| |
| |-base-styles
| |    |- forms.css
| |    |- headings.css
| |    |- images.css
| |    |- lists.css
| |    |- tables.css
| |    |- etc.
| |
| |-component-styles
| |    |- alerts.css
| |    |- buttons.css
| |    |- carousel.css
| |    |- dropdowns.css
| |    |- modals.css
| |    |- etc.
| |
| |- structural-styles
| |    |- layout-checkout.css
| |    |- layout-sidebar.css
| |    |- layout-primary.css
| |    |- layout-settings.css
| |    |- etc.
| |
| |- utility-styles
| |    |- utility.css
| |
| |- browser-specific-styles
| |    |-ie8.css

適用CSS Dig， 它是 Google Chrome 瀏覽器的一款免費插件。能夠分析css的源文件和沒法分析的文件。

補充說明：

僞類和僞元素的區別：
（1）僞類的效果能夠經過添加實際的類來實現

em:first-child {
    color: red;
}

僞元素的效果能夠經過添加實際的元素來實現

p::first-letter {
    color: red;
}

（2）css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。（3）僞類就像真正的類同樣，能夠疊加使用僞元素在一個選擇器中只能出現一次，而且只能出如今末尾（4）僞類有：:first-child ，:linkvistited，:hover，:active，:focus，:lang 等僞元素有：:first-line，:first-letter，:before，:after