推荐使用link标签引入外部样式表，支持缓存、便于维护；2. 按需加载页面专属样式，避免全局引入冗余CSS；3. 利用构建工具合并公共样式、拆分独立文件；4. 避免@import和大量行内style，保持结构清晰与高效加载。
在多页面项目中，CSS 引入方式的选择直接影响页面性能、维护成本和加载效率。合理使用 CSS 引入方式，能提升用户体验并降低资源重复加载的问题。
1. 使用 link 标签引入外部样式表（推荐）
每个页面通过 引入所需的 CSS 文件，是多页面项目中最常见且最推荐的方式。
- 支持浏览器缓存，公共样式只需下载一次
- 便于维护和版本管理
- 有利于构建工具进行依赖分析和优化
例如，多个页面共用的重置样式或通用组件样式可提取为 common.css：
页面专属样式则单独引入：
立即学习“前端免费学习笔记（深入）”；
2. 按需加载，避免全局引入
不要在每个页面都引入全部 CSS，尤其是体积较大的框架或组件库。
- 首页只加载首页需要的样式
- 列表页引入列表相关样式，详情页引入详情页专用样式
- 减少不必要的字节传输，加快首屏渲染
可通过构建脚本或模板引擎动态控制 link 的输出，实现按页面注入对应资源。
3. 利用构建工具合并与拆分
借助 Webpack、Vite 或 Gulp 等工具，将 CSS 进行智能处理：
- 提取所有页面共用的样式生成 vendor.css 或 base.css
- 将高频使用的组件样式提前内联或预加载
- 为每个页面生成独立的 CSS 文件，配合 HTML 自动注入
这样既能享受缓存优势，又能避免单个 CSS 文件过大。
4. 避免使用 @import 和行内 style
@import 会阻塞样式加载且不被浏览器并行请求，影响性能，尤其在多页面中应避免嵌套引入。
大量使用 内联样式不利于维护，也难以复用，仅建议用于极小的页面特定样式或关键渲染路径上的少量样式（如 above-the-fold 优化）。
基本上就这些。保持结构清晰、资源分离、按需加载，是多页面项目中管理 CSS 的核心原则。合理利用工具链，能让整个流程更高效稳定。
