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
**** Hidden Message *****
啥也不说了,感谢楼主分享哇! 确实是难得好帖啊,顶先 啥也不说了,感谢楼主分享哇! 啥也不说了,感谢楼主分享哇! 啥也不说了,感谢楼主分享哇! 确实是难得好帖啊,顶先 确实是难得好帖啊,顶先 啥也不说了,感谢楼主分享哇! 啥也不说了,感谢楼主分享哇!
页:
[1]
2