外部 CSS 文件应使用 <link> 而非 @import，因其避免串行加载、FOUC 和解析阻塞；需按功能拆分、条件加载、哈希命名并合理设置缓存策略。
外部 CSS 文件应该用 <link> 而不是 @import
大型项目里，@import 在 CSS 文件中引入其他样式表，会阻塞并串行加载，导致关键 CSS 延迟解析。浏览器无法并行下载，还可能触发 FOUC（Flash of Unstyled Content）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有外部 CSS 都通过 HTML 的
<link rel="stylesheet">提前声明，放在<head>中靠前位置 - 避免在 CSS 文件里写
@import url("xxx.css")，尤其不能用于基础重置或主题样式 - 构建工具（如 Webpack、Vite）默认处理
import './base.css'时，也应输出为<link>标签而非内联或@import
按功能拆分 CSS 文件，但控制 HTTP 请求数
模块化拆分能提升可维护性，但每个 <link> 都是一次网络请求。HTTP/2 下多路复用缓解了部分压力，但首屏关键样式仍需优先保障。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 拆分为：
reset.css（仅 normalize / reset）、layout.css（栅格、容器、基础布局）、theme.css（颜色、字体变量、主题类）、component.css（按业务组件拆，如button.css、modal.css） - 非首屏组件（如后台管理页的图表控件）使用
rel="preload"或动态loadCSS()加载，不参与初始渲染阻塞 - 构建阶段对首屏必需的 CSS 合并压缩为单个
main.css，其余按路由或功能异步加载
使用 media 属性做条件加载，减少无用解析
比如打印样式、深色模式、高对比度适配等，若直接加载进主流程，会增加 CSSOM 构建负担，尤其在低端设备上明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 将打印样式单独抽成
print.css，用<link media="print" href="print.css">声明，浏览器只在打印时解析 - 响应式断点相关样式可合并进主文件，但深色模式建议用
<link media="(prefers-color-scheme: dark)">，由浏览器按系统偏好自动选择 - 避免用 JS 动态切换
media值来模拟主题切换——这会导致样式表反复解析和重绘；改用 CSS 自定义属性 + 类名控制更稳定
缓存策略与版本控制必须匹配构建输出
外部 CSS 文件一旦被强缓存（Cache-Control: max-age=31536000），内容变更后用户可能长期看不到更新。常见错误是 HTML 中引用的文件名没变，但内容已更新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 构建时对 CSS 文件名添加内容哈希，例如
main.a1b2c3d4.css，HTML 中引用该带哈希的路径 - 禁用对 CSS 的
ETag验证，统一走Cache-Control + Last-Modified，减少协商请求 - 若用 CDN，确保其支持基于文件内容的缓存键（而非 URL 路径），否则哈希失效
/* webpack.config.js 示例 */
module.exports = {
output: {
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].js',
assetModuleFilename: 'assets/[name].[contenthash:8][ext]'
}
};真正容易被忽略的是：HTML 文件本身缓存时间要短于 CSS（比如 max-age=600），否则用户即使拿到新 HTML，里面仍引用着旧哈希的 CSS 链接。
