dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1722|回复: 17

[前端] CSS重构:样式表性能调优(pdf)

[复制链接]
  • TA的每日心情
    奋斗
    2023-5-5 00:22
  • 签到天数: 32 天

    [LV.5]常住居民I

    307

    主题

    280

    帖子

    1284

    积分

    荣誉会员

    积分
    1284

    发表于 2022-7-28 01:00:06 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    1.png

    译者序.....................................................................................................................................................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


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

    温馨提示:
    1、本站所有内容均为互联网收集或网友分享或网络购买,本站不破解、不翻录任何视频!
    2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意!
    3、本站资源仅供本站会员学习参考,不得传播及用于其他用途,学习完后请在24小时内自行删除.
    4、本站资源质量虽均经精心审查,但也难保万无一失,若发现资源有问题影响学习请一定及时点此进行问题反馈,我们会第一时间改正!
    5、若发现链接失效了请联系管理员,管理员会在2小时内修复
    6、如果有任何疑问,请加客服QQ:1300822626 2小时内回复你!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    11 小时前
  • 签到天数: 1181 天

    [LV.10]以坛为家III

    1

    主题

    2678

    帖子

    8579

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    8579

    发表于 2022-7-28 03:09:05 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    前天 11:40
  • 签到天数: 341 天

    [LV.8]以坛为家I

    1

    主题

    1439

    帖子

    4005

    积分

    傲视群雄

    Rank: 8Rank: 8

    积分
    4005

    发表于 2022-7-28 07:28:36 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    半小时前
  • 签到天数: 1163 天

    [LV.10]以坛为家III

    0

    主题

    1557

    帖子

    6506

    积分

    深不可测

    Rank: 9Rank: 9Rank: 9

    积分
    6506

    发表于 2022-7-28 08:58:08 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    昨天 10:40
  • 签到天数: 1695 天

    [LV.Master]伴坛终老

    0

    主题

    2426

    帖子

    9345

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    9345

    发表于 2022-7-28 10:12:45 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2024-6-15 14:54
  • 签到天数: 53 天

    [LV.5]常住居民I

    0

    主题

    142

    帖子

    518

    积分

    技冠群雄

    Rank: 6Rank: 6

    积分
    518

    发表于 2022-7-28 10:23:16 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    2024-11-2 11:32
  • 签到天数: 474 天

    [LV.9]以坛为家II

    2

    主题

    966

    帖子

    3274

    积分

    傲视群雄

    Rank: 8Rank: 8

    积分
    3274

    发表于 2022-7-28 11:28:01 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    2024-10-7 12:45
  • 签到天数: 95 天

    [LV.6]常住居民II

    0

    主题

    373

    帖子

    2653

    积分

    傲视群雄

    Rank: 8Rank: 8

    积分
    2653

    发表于 2022-7-28 14:57:34 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 14:43
  • 签到天数: 893 天

    [LV.10]以坛为家III

    1

    主题

    4717

    帖子

    1万

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    11844

    发表于 2022-7-28 16:19:03 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    昨天 09:46
  • 签到天数: 1298 天

    [LV.10]以坛为家III

    1

    主题

    4725

    帖子

    1万

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    13033

    发表于 2022-7-28 19:36:40 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 12:34 , Processed in 0.153958 second(s), 41 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表