《CSS重構 樣式表性能調優》作為CSS重構指南,不僅展示了如何編寫結構合理的CSS,以構建響應式、易于使用的網站,還介紹了如何用重構方法創建可讀性更強和更易于維護的CSS代碼。
《CSS重構 樣式表性能調優》適合所有CCS開發人員。
CSS對于現代網站的用戶體驗至關重要,其地位不亞于決定著網站外形的HTML和讓網站動起來的JavaScript。本書作為CSS代碼重構指南,不僅展示了如何編寫結構合理的CSS,以構建響應式、易于使用的網站,還介紹了如何用重構方法創建可讀性更強和更易于維護的CSS代碼。不論你是剛開始開發自己的**個CSS項目或是清理現有項目的代碼,本書提供的多種寶貴方法都可以幫你建設一個符合優秀建構設計原則的CSS代碼庫。
●了解什么是代碼重構及其與CSS之間的關系
●探索Web瀏覽器如何使用級聯方法決定為哪個元素應用什么樣式
●編寫可預測、易維護和可擴展的CSS,提升代碼復用能力
●理清不同類型的CSS樣式及其使用場景
●確定對哪些瀏覽器和設備進行測試,以維護好CSS
●學習如何合理組織樣式,重構CSS和評估重構效果
Steve Lindstrom 早在 1999 年出于個人愛好開發了自己的**個網站,那時他還在中學讀書。后來他赴佛羅里達州墨爾本市求學,從佛羅里達理工學院獲得了計算機科學學士學位。Steve 曾在國防、旅游科技領域從事軟件開發工作,最近開始涉足電子商務領域。工作之余,他喜歡學習烹飪和喝咖啡。
譯者序 xi
前言 xiii
第 1 章 重構和架構 1
1.1 什么是重構 1
1.2 什么是軟件架構 1
1.2.1 優秀架構是可預測的 2
1.2.2 優秀架構可提升代碼復用性 2
1.2.3 優秀架構可擴展 2
1.2.4 優秀架構可維護 2
1.2.5 優秀架構和重構 2
1.3 需要重構的原因 2
1.3.1 需求變更 3
1.3.2 架構設計不合理 3
1.3.3 低估困難 3
1.3.4 忽視最佳實踐 3
1.4 什么情況下應該重構代碼 4
1.5 什么情況下不應該重構代碼 4
1.6 我能重構自己的代碼嗎 4
1.7 重構示例 5
1.7.1 重構示例 1:計算電子商務訂單的總價 5
1.7.2 重構示例 2: 重構CSS的簡單示例 15
1.8 總結 17
第 2 章 級聯 19
2.1 什么是級聯 19
2.2 選擇器特指度 19
2.3 規則集順序 21
2.4 行內CSS和特指度 21
2.5 用!important聲明覆蓋級聯樣式 22
2.6 總結 23
第 3 章 編寫更優質的CSS 25
3.1 使用注釋 25
3.2 結構一致的規則集 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 創建更好的盒子 34
3.7.1 盒子尺寸:content-box 36
3.7.2 盒子尺寸:border-box 36
3.7.3 content-box或border-box 36
3.8 總結 37
第 4 章 為樣式分類 39
4.1 樣式分類的重要性 39
4.2 通用樣式 39
4.3 基礎樣式 40
4.3.1 定義基礎樣式 40
4.3.2 文檔元數據元素 41
4.3.3 區塊元素 41
4.3.4 標題和文本元素 42
4.3.5 錨點標簽元素 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 定義需要實現的行為 51
4.4.2 保持組件樣式的粒度 51
4.4.3 根據需要,改寫元素容器的樣式 54
4.4.4 將定義尺寸的任務交給結構化容器 59
4.5 結構化樣式 63
4.6 功能樣式 66
4.7 瀏覽器特定樣式 66
4.8 總結 67
第 5 章 測試 69
5.1 為什么說測試很困難 69
5.2 需要測試的重點瀏覽器 69
5.3 瀏覽器市場份額 70
5.4 測試多個瀏覽器 72
5.4.1 iOS系統的Safari瀏覽器 72
5.4.2 安卓 74
5.5 測試老式瀏覽器 75
5.5.1 Internet Explorer和Microsoft Edge 75
5.5.2 Firefox瀏覽器 76
5.5.3 Safari和iOS系統的Safari 76
5.5.4 Chrome瀏覽器 76
5.6 測試最新版本的瀏覽器 77
5.7 第三方測試服務 77
5.8 用開發者工具測試 77
5.8.1 模擬設備尺寸 78
5.8.2 文檔對象模型(DOM)和CSS樣式 81
5.9 視覺回歸測試 82
5.9.1 視覺回歸測試技巧 83
5.9.2 用Gemini執行視覺回歸測試 83
5.10 維護你的代碼 87
5.10.1 編碼規范 87
5.10.2 模式庫 91
5.11 總結 94
第 6 章 代碼的組織和重構策略 95
6.1 按照樣式從最不精確到最精確組織CSS 95
6.1.1 通用樣式 96
6.1.2 基礎樣式 96
6.1.3 組件及其容器的樣式 96
6.1.4 結構化樣式 96
6.1.5 功能性樣式 96
6.1.6 瀏覽器特定樣式 96
6.2 多個文件還是一個大文件 97
6.2.1 提供CSS 97
6.2.2 用單一的CSS文件進行開發 99
6.2.3 用多個CSS文件進行開發 100
6.3 重構前審查CSS 100
6.4 重構策略 102
6.4.1 保持規則集結構的一致性 102
6.4.2 刪除僵尸代碼 102
6.4.3 分離CSS和JavaScript 103
6.4.4 分離基礎樣式 104
6.4.5 刪除冗余的ID 106
6.4.6 將ID轉化為類 106
6.4.7 區分功能性樣式 107
6.4.8 定義可復用組件 107
6.4.9 刪除行內CSS和過于模塊化的類 108
6.4.10 隔離面向特定瀏覽器的CSS樣式 108
6.5 評估重構是否成功 108
6.5.1 你的網站崩潰了嗎 109
6.5.2 UI bug數 109
6.5.3 減少開發和測試時間 109
6.6 總結 110
附錄 normalize.css 111
作者簡介 120
封面說明 120