CSS 优化涵盖样式的组织、按需加载与生成策略。本文列出常见方法，帮助减少渲染阻塞与样式计算成本。
组织与架构
- 使用原子化或 BEM 等命名约定减少样式冲突。
- 抽象主题变量（二进制色、间距、字体）便于运行时切换与生成。
构建优化
- 移除未使用样式（Purging）、压缩（cssnano）与按需加载 Critical CSS。
- 使用 CSS-in-JS 或 CSS Modules 控制范围并支持按组件打包。
运行时性能
- 减少复杂选择器与嵌套层级，避免触发昂贵的样式计算。
- 对动画使用 transform 与 opacity，避免触发布局回流。
生成与自动化
- 模板生成器应输出可缓存且可分割的 CSS，支持按需注入与异步加载。
结论
通过组织、构建和运行时的协同优化，可以显著降低首屏阻塞和长期样式重计算成本，提升用户体验。