CSS重构：样式表性能调优

译者序　　xi
前言　　xiii
第1章　重构和架构　　1
1.1 什么是重构　　1
1.2 什么是软件架构　　1
1.2.1 优秀架构是可预测的　　2
· · · · · · (更多)

译者序　　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
· · · · · · (收起)

人们常将前端技术HTML、CSS和JavaScript亲切地称为“三剑客”，大抵说的是它们并肩支撑起了数以亿计的网站，英勇、侠义之气概不亚于桃园结义的刘关张。但若将网站比作一个少女，HTML可视作她的身躯，CSS必然是伊人的着装打扮，而JavaScript则是其言谈举止。胭脂铅粉易得，化妆技巧难学。CSS何尝不是这样一门技术，稍微有点CSS知识的前端新人，都可以借助可视化编辑工具，随心所欲地加一串...

• 译者序
• 前言
• 第1 章 重构和架构