关键CSS内联须精准提取首屏必需样式（如容器、标题、按钮、骨架屏类），控制在200行内，禁用@import和url()，体积≤1KB，置于中之后首位，并配合外部CSS缓存与异步加载。
关键CSS内联：只塞首屏必需的那部分
内联不是把整个 main.css 复制进 <style></style>，而是提取出渲染首屏（Above-the-Fold）所必须的规则——比如布局容器、标题、按钮基础样式、骨架屏类。Lighthouse 的 “Eliminate render-blocking resources” 建议能帮你定位这部分内容。实际操作中，200 行以内较安全；超过 500 行反而拖慢 HTML 下载，得不偿失。
外部CSS仍为主力：非关键样式一律外链
所有非首屏用到的样式——如页脚、弹窗、动画、媒体查询断点、伪类交互效果（:hover、:focus）——必须保留在外部文件中。原因很实在：main.css 可被浏览器缓存，后续页面访问直接复用；而内联部分每次 HTML 请求都得重新下载。另外，外部 CSS 支持 @import、@layer、CSS 模块化拆分，工程上不可替代。
避免内联与外链样式冲突的常见坑
内联的 <style></style> 会参与 CSSOM 构建，和外部 CSS 同场竞技。容易踩的坑包括：
- 同名选择器权重混乱：比如内联写了
.btn { color: blue; }，外部又定义了.btn:hover { color: red; }，但 hover 效果没生效——因为内联样式没有伪类支持，:hover规则本身不会被内联，但它在外部文件里，浏览器仍会加载并应用 - 重复声明浪费：内联了
body { font-family: ... }，外部又写一遍，不仅冗余，还可能因加载时序导致 FOUC（Flash of Unstyled Content） - 构建流程脱节：手动生成内联 CSS 容易漏更新，推荐用工具如
critters（Vite/webpack 插件）或mini-css-extract-plugin+critical自动提取
字体与图标资源要单独处理
内联 CSS 里如果包含 @font-face 或 SVG data URL，体积会飙升。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 只对首屏强依赖的字体子集（如中文标题常用 200 字）做 base64 内联，完整字体仍走
<link rel="preload" as="font"> - 图标建议用外部
.woff2或 SVG Sprite，不要塞进内联 CSS；若必须内联 SVG，应提取为独立<svg><defs></defs></svg>块，而非 CSS background-image - 注意
crossorigin属性：预加载字体时漏加会导致字体请求失败，尤其在 CDN 场景下
真正难的不是“要不要内联”，而是判断“哪些算关键”——这需要结合真实设备、网络条件、用户行为路径反复验证。一个常被忽略的点：服务端渲染（SSR）场景下，内联 CSS 必须和首次 HTML 响应严格同步，否则 hydration 时样式错乱。
