重构不完全教程集之二

• 2019 年 12 月 4 日
• 筆記

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

故不登高山，不知天之高也；不临深溪，不知地之厚也。–摘自《劝学》

::before & ::after

相当于多了两个空白标签，可以放置一些修饰的点缀或内容等

• css3 生成内容
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

字体

字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等

• 字体渲染背后不得不说的故事
• 字体渲染
• 自定义字体@font-face详解
• 移动端字体
• 图标自定浅谈
• google fonts
• icomoon

图片

总得来说，图片的使用分为background和img，而从优化方向来说分为减少请求和减少大小。

图片优化原则：

1. 能不使用就不使用（使用css3绘制简单的图形等）
2. 矢量图与位图选择
3. 挑选合适的图片格式（gif, png, jpg, webp等）及准备不同的规格大小（不同大小或retina屏）
4. 合并（sprites）与压缩（有损压缩和无损压缩）

资源链接：

• 图片延迟加载的实现
• CSS Gradients
• css sprites
• 图片优化 – 谷歌图片优化手册
• baseline vs progressive
• 图片原理与优化
• WebP 探寻之路
• Web性能优化：图片优化

svg

目前svg最大的用途在图标及动画，最大的优点在于矢量图，可以任意缩放不失真，而且大小还比较小。

• svg 兼容性
• Pocket guide to writing svg
• MDN svg tutorial
• 理解SVG的viewport,viewBox,preserveAspectRatio
• SVG Sprite技术介绍
• SVG symbol a Good Choice for Icons
• svg sprites 兼容js
• svg line animation
• 超级强大的SVG SMIL animation动画详解
• awesome svg

css3 动画

分transition动画和animation动画，前者为两帧动画（只能控制开始和结束），而后者可以对任意帧进行更多处理。

• Intro to CSS 3D transforms
• CSS3 Transitions 101
• CSS3 Animations 101
• CSS3: Animations vs. Transitions
• css3 动画疑难杂症
• High Performance Animations
• css triggers

动画库

• animate.css
• effeckt
• hover.css
• animatable
• css3 magic animation

响应式

响应式主要包括断点的设置，及各种断点情况下样式的改变

• MDN CSS媒体查询
• 下手响应式及断点设置分析
• 响应式图片处理
• Media Queries: Width vs. Device Width
• media queries resource
• 案例参考

如果需要ie8-也支持相应式，得引入js库兼容，如respond.js（不建议ie8去做响应式）

重排与重绘

• 网页性能管理详解
• 10 Ways to Minimize Reflows and Improve Performance

class命名

• 如何命名class
• BEM
• CCSS
• ACSS
• SMACSS
• An Introduction To Object Oriented CSS (OOCSS)

注：该系列将会汇总在github上的重构优秀教程合集