样式工程化与优化
link 与 @import
| 方式 | 说明 |
|---|---|
<link rel="stylesheet"> | 并行加载，推荐 |
@import url() | 多在 CSS 内嵌套，串行延迟，不利于首屏 |
入口样式统一用 link；分包再用构建工具合并。
多文件组织
推荐分层（与旧「优化方案」思路一致）：
- 基础：reset / normalize、CSS 变量
:root - 布局：栅格、页头页脚
- 组件：按钮、表单、卡片
- 页面：仅单页覆盖样式
避免单文件几千行；配合 BEM 或 CSS Modules 控制作用域。
BEM（命名）
block__element--modifier，例如：card__title--large。优点：可读、可维护；缺点：类名偏长。可与原子类方案并存。
预编译（Sass / Less）
变量、嵌套、Mixin 减少重复；构建阶段编译为 CSS。注意：嵌套不宜过深，否则特异性失控。
性能与优化要点（归纳）
- 选择器：避免过深标签链；优先类选择器。
- 体积：删除未使用样式（Purge）、压缩、按需加载页面级 CSS。
- 渲染：减少重排重绘（动画优先
transform/opacity），见 08。 - 加载：关键 CSS 内联或优先加载，其余异步。
小结
工程化目标：可维护 + 可缓存 + 体积可控。团队需统一 命名、目录、预处理器与构建链路。