CSS重構(gòu) 樣式表性能調(diào)優(yōu)

譯者序 xi
前言 xiii
第 1 章 重構(gòu)和架構(gòu) 1
1．1 什么是重構(gòu) 1
1．2 什么是軟件架構(gòu) 1
1．2．1 優(yōu)秀架構(gòu)是可預(yù)測(cè)的 2
1．2．2 優(yōu)秀架構(gòu)可提升代碼復(fù)用性 2
1．2．3 優(yōu)秀架構(gòu)可擴(kuò)展 2
1．2．4 優(yōu)秀架構(gòu)可維護(hù) 2
1．2．5 優(yōu)秀架構(gòu)和重構(gòu) 2
1．3 需要重構(gòu)的原因 2
1．3．1 需求變更 3
1．3．2 架構(gòu)設(shè)計(jì)不合理 3
1．3．3 低估困難 3
1．3．4 忽視最佳實(shí)踐 3
1．4 什么情況下應(yīng)該重構(gòu)代碼 4
1．5 什么情況下不應(yīng)該重構(gòu)代碼 4
1．6 我能重構(gòu)自己的代碼嗎 4
1．7 重構(gòu)示例 5
1．7．1 重構(gòu)示例 1：計(jì)算電子商務(wù)訂單的總價(jià) 5
1．7．2 重構(gòu)示例 2： 重構(gòu)CSS的簡(jiǎn)單示例 15
1．8 總結(jié) 17
第 2 章 級(jí)聯(lián) 19
2．1 什么是級(jí)聯(lián) 19
2．2 選擇器特指度 19
2．3 規(guī)則集順序 21
2．4 行內(nèi)CSS和特指度 21
2．5 用!important聲明覆蓋級(jí)聯(lián)樣式 22
2．6 總結(jié) 23
第 3 章 編寫更優(yōu)質(zhì)的CSS 25
3．1 使用注釋 25
3．2 結(jié)構(gòu)一致的規(guī)則集 26
3．3 保持選擇器的簡(jiǎn)單 27
3．4 分離CSS和JavaScript 31
3．4．1 在JavaScript中使用帶前綴的類和ID 31
3．4．2 用類修改元素樣式 32
3．5 使用類 32
3．6 類名要有意義 33
3．7 創(chuàng)建更好的盒子 34
3．7．1 盒子尺寸：content-box 36
3．7．2 盒子尺寸：border-box 36
3．7．3 content-box或border-box 36
3．8 總結(jié) 37
第 4 章　為樣式分類 39
4．1　樣式分類的重要性 39
4．2　通用樣式 39
4．3　基礎(chǔ)樣式 40
4．3．1　定義基礎(chǔ)樣式 40
4．3．2　文檔元數(shù)據(jù)元素 41
4．3．3　區(qū)塊元素 41
4．3．4　標(biāo)題和文本元素 42
4．3．5　錨點(diǎn)標(biāo)簽元素 44
4．3．6　文本語義元素 45
4．3．7　列表 45
4．3．8　組合元素 47
4．3．9　表格 47
4．3．10　表單 48
4．3．11　圖像 50
4．4　組件樣式 50
4．4．1　定義需要實(shí)現(xiàn)的行為 51
4．4．2　保持組件樣式的粒度 51
4．4．3　根據(jù)需要，改寫元素容器的樣式 54
4．4．4　將定義尺寸的任務(wù)交給結(jié)構(gòu)化容器 59
4．5　結(jié)構(gòu)化樣式 63
4．6　功能樣式 66
4．7　瀏覽器特定樣式 66
4．8　總結(jié) 67
第 5 章　測(cè)試 69
5．1　為什么說測(cè)試很困難 69
5．2　需要測(cè)試的重點(diǎn)瀏覽器 69
5．3　瀏覽器市場(chǎng)份額 70
5．4　測(cè)試多個(gè)瀏覽器 72
5．4．1　iOS系統(tǒng)的Safari瀏覽器 72
5．4．2　安卓 74
5．5　測(cè)試?yán)鲜綖g覽器 75
5．5．1　Internet Explorer和Microsoft Edge 75
5．5．2　Firefox瀏覽器 76
5．5．3　Safari和iOS系統(tǒng)的Safari 76
5．5．4　Chrome瀏覽器 76
5．6　測(cè)試最新版本的瀏覽器 77
5．7　第三方測(cè)試服務(wù) 77
5．8　用開發(fā)者工具測(cè)試 77
5．8．1　模擬設(shè)備尺寸 78
5．8．2　文檔對(duì)象模型（DOM）和CSS樣式 81
5．9　視覺回歸測(cè)試 82
5．9．1　視覺回歸測(cè)試技巧 83
5．9．2　用Gemini執(zhí)行視覺回歸測(cè)試 83
5．10　維護(hù)你的代碼 87
5．10．1　編碼規(guī)范 87
5．10．2　模式庫(kù) 91
5．11　總結(jié) 94
第 6 章　代碼的組織和重構(gòu)策略 95
6．1　按照樣式從最不精確到最精確組織CSS 95
6．1．1　通用樣式 96
6．1．2　基礎(chǔ)樣式 96
6．1．3　組件及其容器的樣式 96
6．1．4　結(jié)構(gòu)化樣式 96
6．1．5　功能性樣式 96
6．1．6　瀏覽器特定樣式 96
6．2　多個(gè)文件還是一個(gè)大文件 97
6．2．1　提供CSS 97
6．2．2　用單一的CSS文件進(jìn)行開發(fā) 99
6．2．3　用多個(gè)CSS文件進(jìn)行開發(fā) 100
6．3　重構(gòu)前審查CSS 100
6．4　重構(gòu)策略 102
6．4．1　保持規(guī)則集結(jié)構(gòu)的一致性 102
6．4．2　刪除僵尸代碼 102
6．4．3　分離CSS和JavaScript 103
6．4．4　分離基礎(chǔ)樣式 104
6．4．5　刪除冗余的ID 106
6．4．6　將ID轉(zhuǎn)化為類 106
6．4．7　區(qū)分功能性樣式 107
6．4．8　定義可復(fù)用組件 107
6．4．9　刪除行內(nèi)CSS和過于模塊化的類 108
6．4．10　隔離面向特定瀏覽器的CSS樣式 108
6．5　評(píng)估重構(gòu)是否成功 108
6．5．1　你的網(wǎng)站崩潰了嗎 109
6．5．2　UI bug數(shù) 109
6．5．3　減少開發(fā)和測(cè)試時(shí)間 109
6．6 總結(jié) 110
附錄 normalize．css 111
作者簡(jiǎn)介 120
封面說明 120