内容简介
本书是前端开发者提升CSS代码质量与性能的实用指南。作者Steve Lindstrom结合多年实践经验,系统阐述了CSS重构的核心原则与具体方法,帮助读者将混乱、冗余的样式表改造为清晰、可维护且高性能的代码。
全书共分为三大部分。第一部分介绍重构的基本概念、动机以及如何评估现有样式表的质量,包括代码异味识别、选择器性能分析等。第二部分深入讲解重构技术,涵盖选择器优化、层叠与继承的合理运用、盒模型与布局的规范化、CSS预处理器(如Sass)的最佳实践,以及如何利用工具(如PostCSS、Stylelint)自动化重构流程。第三部分通过真实案例,演示了从项目初始架构到后期逐步优化的完整重构过程,并讨论团队协作中的样式规范制定。
本书强调实用性和可操作性,每一章都配有代码示例和重构前后对比,帮助读者直观理解改进效果。无论你是刚接触CSS的新手,还是寻求突破的资深开发者,都能从中获得提升样式表性能与可维护性的关键技术。
目录
O’Reilly Media, Inc. 介绍
业界评论
译者序
目标读者
本书的目标
本书不涉及的内容
术语
配套网站提供的内容
排版约定
O’Reilly Safari
联系我们
电子书
第 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
作者简介
您当前的等级为
登录后免费下载登录
小黑屋反思中,不准下载!
评论后刷新页面下载评论
支付¥以后下载
请先登录
您今天的下载次数(次)用完了,请明天再来
支付积分以后下载立即支付
支付以后下载立即支付
您当前的用户组不允许下载升级会员
您已获得下载权限
您可以每天下载资源次,今日剩余次
⚠ 网盘链接如果失效了请尝试其他网盘,不再补链,因为补了也会再次失效。
免责申明:
1. 本站分享的所有书籍均来源于自互联网,部分书籍中可能有压制者放置的广告,这并不是本站所为,请注意甄别。
2. 我们分享这些书籍,纯粹是出于知识分享的热情,以及对互联网分享精神的高度认同和践行,不以盈利为目的。
3. 本站分享的所有书籍,仅供个人学习研究使用,请勿用于任何商业用途,否则产生的一切法律纠纷与本站无关。
4. 如果这些书籍让你有所收获,在条件允许的情况下,请一定购买正版书籍,这是对创作者最好的支持。
5. 如果您是此书籍的版权所有者,且您不希望此作品出现在本站,请联系我们,我们将在收到您的请求后48小时内予以删除。