link 标签必须放在 head 内且靠前（meta charset 和 title 之后），避免塞入 body 导致渲染阻塞、fouc；禁用 @import；动态样式优先用 createelement('link')；多文件应合并+media 条件加载；css in js 仍需注意全局重置和模块化配置；http/2 下建议 6–10 个同源 css 文件；首屏关键 css 应内联。
link 标签放 head 里，但别在 body 开头硬塞
绝大多数项目出问题，不是因为没引入 CSS，而是 <link> 被塞到了 开头甚至中间。浏览器解析到它时会暂停 HTML 构建，发起请求，等 CSS 下载+解析完才继续——这直接拖慢首屏渲染，还可能触发 FOUC（内容闪动）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="style.css">必须放在内，且尽量靠前（但要在<meta charset>和<title></title>之后） - 避免用
@import在 CSS 文件里再引入其他 CSS——它会串行加载，无法并行，且阻塞渲染更严重 - 如果必须动态加样式（比如主题切换），优先用
document.createElement('link')+rel="stylesheet"，而不是innerHTML插入或改<style></style>标签内容
多个 CSS 文件？先合并，再用 media 属性做条件加载
100 个项目里，87 个存在「为兼容旧设备/打印/暗色模式」单独建一个 CSS 的情况，但直接全量引入，浪费带宽又拖慢主流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把基础样式（重置、布局、组件通用类）打成一个
base.css，用<link rel="stylesheet">同步加载 - 打印样式用
media="print"：<link rel="stylesheet" href="print.css" media="print">—— 浏览器不会下载它，除非用户点打印 - 响应式断点或配色方案（如
prefers-color-scheme: dark）用@media包裹在主文件里，而不是拆成独立文件再靠 JS 切换 link 的disabled
现代项目里，CSS in JS 或 CSS Modules 不等于“不用管引入顺序”
用了 styled-components 或 emotion，不代表 CSS 就自动按需、有序、无冲突。实际踩坑最多的是：全局重置被组件样式覆盖，或两个组件的 keyframes 名字撞车导致动画失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局 reset / normalize 仍需通过
<link>或import 'reset.css'在应用最顶层引入，不能只靠某个组件的createGlobalStyle - 用 CSS Modules 时，确保构建工具（如 Webpack）配置了
modules: { auto: true }，否则.module.css文件可能被当成普通 CSS 全局注入 - 避免在多个
useEffect里反复调用insertRule或动态appendChildstyle 标签——样式表插入是同步操作，频繁触发会卡 UI 线程
HTTP/2 下，多小文件不一定比大文件差，但得看怎么拆
HTTP/2 支持多路复用，所以很多人觉得“拆成 20 个 CSS 文件也无所谓”。错。真实瓶颈常出现在 DNS 查询、TLS 握手、服务器队列调度上——尤其当这些文件分散在不同域名（CDN 子域）时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 同源下，6–10 个 CSS 文件对 HTTP/2 是较优区间；超过 15 个，就要查是否真有必要（比如每个图标都单独一个 CSS）
- 关键路径上的 CSS（如首屏按钮、导航栏）务必内联进 HTML 的
<style></style>标签，用critical工具提取，而非指望 preload -
preload对 CSS 作用有限：<link rel="preload" as="style" href="main.css">只提前下载，不提前解析；想提前解析得补上onload="this.rel='stylesheet'"
真正难的不是选哪种引入方式，而是判断哪部分样式影响首屏、哪部分能延迟、哪部分必须同步阻塞——这个边界，得靠 coverage 面板和真实设备 Lighthouse 抓，不能凭感觉猜。
