重構不完全教程集之二

• 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
• 圖片優化 – Google圖片優化手冊
• 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上的重構優秀教程合集