CSS重構樣式表性能調優 CSS重构 样式表性能调优

[美]史蒂夫·林德斯特倫

立即出貨 (庫存 < 3)

買這商品的人也買了...

商品描述

《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