唯一100%可控解法是将首屏关键CSS内联至<head>顶部的<style>标签，体积≤10KB、无media属性，并用critters等工具自动生成；非关键CSS应通过media="print" onload="this.media='all'"异步加载并配noscript兜底。
直接在每个页面的 <head> 里用 <link rel="stylesheet"> 引入各自需要的 CSS 文件，是最简单、最可控的方式——只要控制好加载顺序和复用边界，就不会污染全站样式。
为什么不能用 @import 在 CSS 里引入公共样式
@import 是串行阻塞加载：浏览器必须先下载并解析完当前 CSS，才能发起下一个 @import 的请求。比如你在 about.css 开头写 @import "shared.css";，实际网络面板会看到 about.css → shared.css 的链式加载，首屏渲染被拖慢，还容易触发 FOUC（闪白屏）。
- 构建工具（Vite/Webpack）能处理
@import，但产出必须是单个打包后的 CSS；上线文件里绝不能留原生@import - 如果没构建工具，就彻底放弃
@import，全部改用 HTML 中的<link> -
@import不支持media属性，也无法被浏览器预加载机制识别
如何组织 <link> 加载顺序避免样式覆盖
所有页面都先引入 shared.css，再引入各自专属 CSS（如 about.css），这样专属样式才能安全覆盖通用规则。
-
shared.css只放语义类名（如.btn、.container），禁用高权重选择器（如div#main .card p a） - 专属 CSS 文件路径要明确区分，比如
css/about.css、css/admin.css，避免命名冲突 - 不要在某个页面里既
<link href="shared.css">，又在<style>标签里手写相同规则——调试时根本找不到样式来源
动态加载 CSS 时怎么防止重复和 FOUC
用 JS 创建 <link> 注入样式确实灵活，但时机不对就会闪屏或重复加载。
立即学习“前端免费学习笔记（深入）”；
- 插入后必须监听
load事件再操作 DOM：link.onload = () => renderContent(); - 加缓存 Map 防止重复请求：
if (!loadedCSS.has(href)) { loadCSS(href); loadedCSS.add(href); } - 移动端某些安卓 WebView 对动态
<link>渲染有延迟，建议搭配rel="preload"提前触发下载 - 绝对别用
document.write或内联<style>注入大量样式——绕过浏览器对 CSS 的解析优化，也不利于缓存
真正难的不是“怎么加”，而是“加在哪”和“加几次”：shared.css 必须只存在一个物理文件，且所有页面的 <link> 路径完全一致；一旦某页漏引或错引，样式一致性就崩了。路径、顺序、缓存三者缺一不可。
