編輯推薦
CSS對於現代網站的用戶體驗至關重要,其地位不亞於決定著網站外形的HTML和讓網站動起來的JavaScript。本書作為CSS代碼重構指南,不僅展示瞭如何編寫結構閤理的CSS,以構建響應式、易於使用的網站,還介紹瞭如何用重構方法創建可讀性更強和更易於維護的CSS代碼。不論你是剛開始開發自己的**個CSS項目或是清理現有項目的代碼,本書提供的多種寶貴方法都可以幫你建設一個符閤優秀建構設計原則的CSS代碼庫。
●瞭解什麼是代碼重構及其與CSS之間的關係
●探索Web瀏覽器如何使用級聯方法決定為哪個元素應用什麼樣式
●編寫可預測、易維護和可擴展的CSS,提升代碼復用能力
●理清不同類型的CSS樣式及其使用場景
●確定對哪些瀏覽器和設備進行測試,以維護好CSS
●學習如何閤理組織樣式,重構CSS和評估重構效果
內容簡介
《CSS重構 樣式錶性能調優》作為CSS重構指南,不僅展示瞭如何編寫結構閤理的CSS,以構建響應式、易於使用的網站,還介紹瞭如何用重構方法創建可讀性更強和更易於維護的CSS代碼。
《CSS重構 樣式錶性能調優》適閤所有CCS開發人員。
作者簡介
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
CSS重構 樣式錶性能調優 下載 mobi epub pdf txt 電子書 格式