《CSS重構(gòu) 樣式表性能調(diào)優(yōu)》作為CSS重構(gòu)指南，不僅展示了如何編寫結(jié)構(gòu)合理的CSS，以構(gòu)建響應(yīng)式、易于使用的網(wǎng)站，還介紹了如何用重構(gòu)方法創(chuàng)建可讀性更強和更易于維護(hù)的CSS代碼。
《CSS重構(gòu) 樣式表性能調(diào)優(yōu)》適合所有CCS開發(fā)人員。
CSS對于現(xiàn)代網(wǎng)站的用戶體驗至關(guān)重要，其地位不亞于決定著網(wǎng)站外形的HTML和讓網(wǎng)站動起來的JavaScript。本書作為CSS代碼重構(gòu)指南，不僅展示了如何編寫結(jié)構(gòu)合理的CSS，以構(gòu)建響應(yīng)式、易于使用的網(wǎng)站，還介紹了如何用重構(gòu)方法創(chuàng)建可讀性更強和更易于維護(hù)的CSS代碼。不論你是剛開始開發(fā)自己的**個CSS項目或是清理現(xiàn)有項目的代碼，本書提供的多種寶貴方法都可以幫你建設(shè)一個符合優(yōu)秀建構(gòu)設(shè)計原則的CSS代碼庫。
●了解什么是代碼重構(gòu)及其與CSS之間的關(guān)系
●探索Web瀏覽器如何使用級聯(lián)方法決定為哪個元素應(yīng)用什么樣式
●編寫可預(yù)測、易維護(hù)和可擴(kuò)展的CSS，提升代碼復(fù)用能力
●理清不同類型的CSS樣式及其使用場景
●確定對哪些瀏覽器和設(shè)備進(jìn)行測試，以維護(hù)好CSS
●學(xué)習(xí)如何合理組織樣式，重構(gòu)CSS和評估重構(gòu)效果
Steve Lindstrom 早在 1999 年出于個人愛好開發(fā)了自己的**個網(wǎng)站，那時他還在中學(xué)讀書。后來他赴佛羅里達(dá)州墨爾本市求學(xué)，從佛羅里達(dá)理工學(xué)院獲得了計算機(jī)科學(xué)學(xué)士學(xué)位。Steve 曾在國防、旅游科技領(lǐng)域從事軟件開發(fā)工作，最近開始涉足電子商務(wù)領(lǐng)域。工作之余，他喜歡學(xué)習(xí)烹飪和喝咖啡。
譯者序 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ù)測的 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è)計不合理 3
1．3．3 低估困難 3
1．3．4 忽視最佳實踐 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：計算電子商務(wù)訂單的總價 5
1．7．2 重構(gòu)示例 2： 重構(gòu)CSS的簡單示例 15
1．8 總結(jié) 17
第 2 章 級聯(lián) 19
2．1 什么是級聯(lián) 19
2．2 選擇器特指度 19
2．3 規(guī)則集順序 21
2．4 行內(nèi)CSS和特指度 21
2．5 用!important聲明覆蓋級聯(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 保持選擇器的簡單 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 錨點標(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 定義需要實現(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 章 測試 69
5．1 為什么說測試很困難 69
5．2 需要測試的重點瀏覽器 69
5．3 瀏覽器市場份額 70
5．4 測試多個瀏覽器 72
5．4．1 iOS系統(tǒng)的Safari瀏覽器 72
5．4．2 安卓 74
5．5 測試?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 測試最新版本的瀏覽器 77
5．7 第三方測試服務(wù) 77
5．8 用開發(fā)者工具測試 77
5．8．1 模擬設(shè)備尺寸 78
5．8．2 文檔對象模型（DOM）和CSS樣式 81
5．9 視覺回歸測試 82
5．9．1 視覺回歸測試技巧 83
5．9．2 用Gemini執(zhí)行視覺回歸測試 83
5．10 維護(hù)你的代碼 87
5．10．1 編碼規(guī)范 87
5．10．2 模式庫 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 多個文件還是一個大文件 97
6．2．1 提供CSS 97
6．2．2 用單一的CSS文件進(jìn)行開發(fā) 99
6．2．3 用多個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 評估重構(gòu)是否成功 108
6．5．1 你的網(wǎng)站崩潰了嗎 109
6．5．2 UI bug數(shù) 109
6．5．3 減少開發(fā)和測試時間 109
6．6 總結(jié) 110
附錄 normalize．css 111
作者簡介 120
封面說明 120
新書資訊