1、什麼是優秀的架構
（1）優秀的架構是可預測的
（2）優秀的架構是可擴充套件的
（3）優秀的架構可提升程式碼複用性
（4）優秀的架構可擴充套件
（5）優秀的架構可維護
什麼時候可以重構：僅當重構能夠改善架構或使程式碼符合編碼規範時，才應進行重構。
2、級聯
級聯是瀏覽器決定為元素應用哪種樣式的一種方法。
特指度度量的是 CSS 選擇器識別元素的精確性。計算特指度時需要分析這些選擇器（除了通用選擇器 *）。為 (a, b, c, d) 中的各個變數賦予相應的數值，就能得到特指度。
(1) 如果用 style 屬性應用樣式，則 a=1，否則 a=0。
(2) b 為 ID 選擇器的數量。
(3) c 為類選擇器、屬性選擇器和偽類的數量。
(4) d 為型別選擇器和偽元素的數量。
3、編寫優質的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]–->4、測試
測試多個瀏覽器。
Gemini（https://github.com/gemini-tes…）專案是 Yandex 團隊（https://www.yandex.com）開發的視覺迴歸測試工具。使用該工具，你可以編寫指令碼，自動擷取網站在主流瀏覽器中的截圖，然後將其與基準影像比較，不同之處將以高亮形式標記出來。
5、程式碼的組織和重構策略
按照樣式從最不精確到最精確組織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