Appearance
CSS 工程化
预处理器 · Icon 技术 · 性能优化 · Sprites
1. CSS 预处理器 / 后处理器
预处理器（Less/Sass/Stylus）：
- 为 CSS 增加编程特性：变量、嵌套、mixin、循环、函数
- 编译为 CSS 后使用
- 好处：结构清晰、便于扩展、屏蔽浏览器差异
后处理器（PostCSS）：
- 处理 CSS 本身（类似 Babel 对 JS 的作用）
- 常用场景：Autoprefixer 自动加浏览器前缀
CSS 工程化三个方向：预处理器（Less/Sass）、PostCSS 插件、Webpack loader
2. Icon 技术演进
发展历程：img 图片 → CSS Sprites → Font Awesome → iconfont
iconfont 三种使用方式：
| 方式 | 兼容性 | 多色 | 特点 |
|---|---|---|---|
| unicode | IE6+ | ❌ | 兼容性最好，书写不直观 |
| font-class | IE8+ | ❌ | 语意明确（.icon-QQ） |
| symbol | IE9+ | ✅ | 支持多色、SVG 矢量、可用 CSS 动画 |
Inline SVG vs Icon Font：
| 维度 | Icon Font | Inline SVG |
|---|---|---|
| 矢量 | 当文本处理，会抗锯齿 | 真正矢量，清晰锐利 |
| CSS 控制 | font-size/颜色 | 同上，且可控制各部分 |
| 定位 | 依赖行内属性 | 显示尺寸就是本身尺寸 |
| 可靠性 | 可能跨域/加载失败 | 内联在文档流，无风险 |
| 兼容性 | IE6+ | IE9+ |
结论：只需兼容 IE9+ → inline SVG 几乎全面优于 icon font
3. CSS Sprites（精灵图）
- 将所有小图标合并到一张大图，通过
background-position定位 - 优点：减少 HTTP 请求、减少图片总字节
- 缺点：合并麻烦、定位需测量、维护困难
4. CSS 性能优化
选择器匹配机制（从右向左）：
- 浏览器解析选择器时从右向左匹配
- 最右侧部分决定匹配效率，应尽可能精确
加载性能：
- CSS 压缩、减少
@import（用link代替） - 避免通配符选择器
* - 选择器层级不超过三层，多用 class 少用标签
渲染性能：
- 减少重排重绘（避免频繁读取
offset*/scroll*/client*） - 去除空规则、属性值 0 不加单位
- CSS 雪碧图（小图标）
- 减少昂贵属性：
box-shadow、border-radius、filter、:nth-child will-change提前告知浏览器（不可滥用）