CSS 重构:样式表性能调优 PDF 文档

发布于 2023-05-14 14:46:07 字数 3430 浏览 65 评论 0

本书作为 CSS 重构指南,不仅展示了如何编写结构合理的 CSS,以构建响应式、易于使用的网站,还介绍了如何用重构方法创建可读性更强和更易于维护的 CSS 代码。

本书适合所有 CSS 开发人员。

刚开始学 CSS 那会儿,我发现它的句法(组成一门编程语言的规则和结构)掌握起来很简单,因为代码的编写方式有现成的规则可循。然而,我发现组织好 CSS,使其易于维护,则难度比较大。比这更难的是整理之前写的、结构不清晰的 CSS。我写这本书的初衷就是想把自己在试错过程中学到的一切分享给更多人。若是我刚开始学 CSS 那会儿,市面上有这样一本书就好了。

目标读者

虽然我希望所有 CSS 开发人员都能从中受益,但本书主要是写给那些勉强能够编写可用的用户界面的读者的,他们缺乏经验或视野不够开阔,不能从全局理解自己编写的代码是怎么组织在一起的。目标读者懂得怎样编写 CSS 语句,但也许不理解某些做法背后的原因。他们可能也不知道怎么安排代码的架构,使其成为易维护、易扩展并且便于合作开发的软件。

本书的目标

本书旨在阐明 CSS 的一些比较微妙的知识点,便于新手理解。我还想讲讲为什么编写和测试 CSS 很难,以及为什么说花时间重构 CSS 是值得的。

封面
数字版权声明
译者介绍
扉页
版权
版权声明
O’Reilly Media, Inc.介绍
献词
目录
译者序
前言
第1章 重构和架构
1.1 什么是重构
1.2 什么是软件架构
1.2.1 优秀架构是可预测的
1.2.2 优秀架构可提升代码复用性
1.2.3 优秀架构可扩展
1.2.4 优秀架构可维护
1.2.5 软件架构和重构
1.3 需要重构的原因
1.3.1 需求变更
1.3.2 架构设计不合理
1.3.3 低估困难
1.3.4 忽视最佳实践
1.4 什么情况下应该重构代码
1.5 什么情况下不应该重构
1.6 我能重构自己的代码吗
1.7 重构示例
1.7.1 重构示例1:计算电子商务订单的总价
1.7.2 重构示例2:重构CSS的简单示例
1.8 总结
第2章 级联
2.1 什么是级联
2.2 选择器特指度
2.3 规则集顺序
2.4 行内CSS和特指度
2.5 用!important声明覆盖级联样式
2.6 总结
第3章 编写更优质的CSS
3.1 使用注释
3.2 结构一致的规则集
用浏览器引擎前缀组织属性
3.3 保持选择器的简单
高性能选择器
3.4 分离CSS和JavaScript
3.4.1 在JavaScript中使用带前缀的类和ID
3.4.2 用类修改元素样式
3.5 使用类
3.6 类名要有意义
避免使用过于模块化的类
3.7 创建更好的盒子
3.7.1 盒子尺寸:content-box
3.7.2 盒子尺寸:border-box
3.7.3 content-box或border-box
3.8 总结
第4章 为样式分类
4.1 样式分类的重要性
4.2 通用样式
4.3 基础样式
4.3.1 定义基础样式
4.3.2 文档元数据元素
4.3.3 区块元素
4.3.4 标题和文本元素
4.3.5 锚点标签元素
4.3.6 文本语义元素
4.3.7 列表
4.3.8 组合元素
4.3.9 表格
4.3.10 表单
4.3.11 图像
4.4 组件样式
4.4.1 定义需要实现的行为
4.4.2 保持组件样式的粒度
4.4.3 根据需要,改写元素容器的样式
4.4.4 将尺寸的定义交由结构化容器
4.5 结构化样式
4.6 功能样式
4.7 浏览器特定样式
4.8 总结
第5章 测试
5.1 为什么说测试很困难
5.2 需要测试的重点浏览器
5.3 浏览器市场份额
Google Analytics的浏览器统计数据和屏幕分辨率
5.4 测试多个浏览器
5.4.1 iOS系统的Safari浏览器
5.4.2 安卓
5.5 测试老式浏览器
5.5.1 Internet Explorer和Microsoft Edge
5.5.2 Firefox浏览器
5.5.3 Safari和iOS系统的Safari
5.5.4 Chrome浏览器
5.6 测试最新版本的浏览器
5.7 第三方测试服务
5.8 用开发者工具测试
5.8.1 模拟设备尺寸
5.8.2 文档对象模型(DOM)和CSS样式
5.9 视觉回归测试
5.9.1 视觉回归测试技巧
5.9.2 用Gemini执行视觉回归测试
5.10 维护你的代码
5.10.1 编码规范
5.10.2 模式库
5.11 总结
第6章 代码的组织和重构策略
6.1 按照样式从最不精确到最精确组织CSS
6.1.1 通用样式
6.1.2 基础样式
6.1.3 组件及其容器的样式
6.1.4 结构化样式
6.1.5 功能性样式
6.1.6 浏览器特定样式
6.2 多个文件还是一个大文件
6.2.1 提供CSS
6.2.2 用单一的CSS文件进行开发
6.2.3 用多个CSS文件进行开发
6.3 重构前审查CSS
6.4 重构策略
6.4.1 保持规则集结构的一致性
6.4.2 删除僵尸代码
6.4.3 分离CSS和JavaScript
6.4.4 分离基础样式
6.4.5 删除冗余的ID
6.4.6 将ID转化为类
6.4.7 区分功能性样式
6.4.8 定义可复用组件
6.4.9 删除行内CSS和过于模块化的类
6.4.10 隔离面向特定浏览器的CSS样式
6.5 评估重构是否成功
6.5.1 你的网站崩溃了吗
6.5.2 UI bug数
6.5.3 减少开发和测试时间
6.6 总结
附 录 normalize.css
作者简介
封面说明
连接图灵
看完了

下载地址:https://www.wenjiangs.com/wp-content/uploads/staticcdn/pdf/2af16fca-dfbe26e2.zip

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

文章
评论
84962 人气
更多

推荐作者

泪是无色的血

文章 0 评论 0

yriii2

文章 0 评论 0

1649543945

文章 0 评论 0

g红火

文章 0 评论 0

嘿哥们儿

文章 0 评论 0

旧城烟雨

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文