CSS重构:样式表性能调优(pdf)

搬运工

译者序.....................................................................................................................................................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
viii ｜ 目录
第 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
目录 ｜ ix
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
x ｜ 目录
第 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

游客，如果您要查看本帖隐藏内容请回复

taipingyang2021

啥也不说了，感谢楼主分享哇！

randy_1981

确实是难得好帖啊，顶先

liuyez123

啥也不说了，感谢楼主分享哇！

pancai

啥也不说了，感谢楼主分享哇！

894238940

啥也不说了，感谢楼主分享哇！

bobe

确实是难得好帖啊，顶先

AlexBruce

确实是难得好帖啊，顶先

17770767379

啥也不说了，感谢楼主分享哇！

李才哥

啥也不说了，感谢楼主分享哇！