故不登高山，不知天之高也；不临深溪，不知地之厚也。--摘自《劝学》
::before & ::after 相当于多了两个空白标签，可以放置一些修饰的点缀或内容等
css3 生成内容 a whole bunch of amazing stuff pseudo elements can do 字体 字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等
字体渲染背后不得不说的故事 字体渲染 自定义字体 @font-face 详解 移动端字体 图标自定浅谈 google fonts icomoon 图片 总得来说，图片的使用分为background和img，而从优化方向来说分为减少请求和减少大小。
图片优化原则：
能不使用就不使用（使用css3绘制简单的图形等） 矢量图与位图选择 挑选合适的图片格式（gif, png, jpg, webp等）及准备不同的规格大小（不同大小或retina屏） 合并（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上的 重构优秀教程合集