多个CSS文件会拖慢首屏，因浏览器遇首个link rel="stylesheet"即暂停HTML解析，多次阻塞+HTTP请求导致TTFB累积；应按变更频率与使用范围合并（如common.css）或分离（如admin/dashboard.css、print.css），避免手动合并引发路径、@import、顺序问题，并用preload或内联关键CSS优化。
为什么多个会拖慢首屏
浏览器遇到第一个 <link rel="stylesheet"> 就暂停 HTML 解析，等 CSS 下载+解析完才继续——这叫渲染阻塞。多个文件意味着多次阻塞、多次 HTTP 请求（即使 HTTP/2 多路复用，TLS 握手、磁盘 I/O、缓存粒度问题依然存在）。常见现象：Network 面板里 reset.css、base.css、header.css 排队加载，TTFB 累积，首屏时间明显变长。
哪些 CSS 必须合并，哪些必须拆开
合并不是为了“少几个文件”，而是让变更频率和使用范围一致的样式待在一起：
-
reset.css、utils.css、button.css这类基础样式，几乎每页都用、极少改动 → 应合并为common.css -
admin/dashboard.css、ab-test-v2.css、prefers-reduced-motion.css只在特定场景生效 → 绝对不要硬塞进主包，否则用户白下一大段无用代码 -
print.css用media="print"声明，dark-theme.css用media="(prefers-color-scheme: dark)"，它们根本不会触发渲染阻塞
合并时最容易踩的坑
手动复制粘贴合并？别这么做。真正出问题的地方往往藏在细节里：
- 相对路径失效：
icon.css里写url(../fonts/icon.woff)，合并后基准目录变了 → 改成绝对路径url(/fonts/icon.woff)或用构建工具重写 -
@import没清理干净：它会在运行时触发额外请求，且无法被 Vite/Webpack 静态分析 → 全部删掉，改用构建时导入 - 顺序错乱：原 HTML 中
<link href="reset.css">在前、<link href="theme.css">在后，合并后必须保持同样顺序，否则!important和选择器优先级就乱了 - Vite 用户记得关
build.cssCodeSplit: false；Webpack 要配MiniCssExtractPlugin+splitChunks.chunks: 'all'并设cacheGroups归入同一 chunk
非关键 CSS 怎么“不阻塞地加载”
像弹窗、图表、后台管理模块的样式，不该卡住首屏。用 <link rel="preload"> 是目前最稳妥的方案：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="modal.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="modal.css"></noscript>
注意两点：onload 回调里必须立刻执行 this.onload=null，否则 Safari 会重复触发；<noscript> 是给禁用 JS 用户的兜底。
内联首屏关键 CSS（比如 <style>.header{...}</style>）比合并更激进，但只适合极小范围；更大的优化空间其实在“按需加载”的判断粒度上——不是页面级，而是组件级、状态级。
