css 引入方式有哪些 常见三种写法怎么选_三种 css 引入方式对比说明

项目中必须用引入CSS，因其支持并行加载、preload、media条件及HTTP/2多路复用；@import导致串行加载与FOUC，仅限调试临时使用；内联style属性仅适用于单次动态场景。

直接说结论：项目里该用 ，调试时可临时用 @import，内联样式（style 属性）只在极少数动态场景下用——不是“三种都能用”，而是有明确优先级和边界。

什么时候必须用 标签引入 CSS

这是唯一支持并行加载、可被浏览器预加载（preload）、能设置 media 条件、支持 HTTP/2 多路复用的引入方式。几乎所有生产环境都靠它。

• 不阻塞 HTML 解析（只要没加 blocking 属性），但会阻塞后续 JS 执行（关键渲染路径上）
• rel="preload" 可提前拉取关键 CSS：

• 媒体查询生效早于 DOM 构建：，对应设备一打开就按条件加载
• 服务端渲染（SSR）或静态站点生成（SSG）中，只有 能被正确提取和注入

@import 在 CSS 文件里引入其他 CSS 的问题

它写在 CSS 里（比如 main.css 开头），不是 HTML 中的标签。看起来方便，实际是性能陷阱。

• 强制串行加载：浏览器必须先下载并解析完当前 CSS，才能发起 @import 指向的资源请求
• 无法被预加载器识别，preload 对它完全无效
• 在 @import 后面定义的样式，可能因加载延迟导致 FOUC（内容闪动）
• 仅在 IE5+ 和现代浏

  

  览器中支持，但 Safari 旧版本对嵌套 @import 有解析 bug
• 示例（不推荐）：

  @import url("reset.css");
  @import "theme.css";

内联样式 style 属性该不该写进 HTML 标签

只在「单次、不可复用、强绑定元素状态」的场景下合理，比如服务端渲染首屏关键样式、JS 动态控制某个元素显隐/位置。

• 没有网络请求开销，但无法缓存，每次 HTML 重载都要重新传输
• 破坏样式与结构分离，维护成本高；CSS 选择器权重也容易失控（!important 更难覆盖）
• 无法使用伪类（:hover）、媒体查询、CSS 变量等高级特性
• React/Vue 等框架中，style={{ opacity: isLoaded ? 1 : 0 }} 是合法用法；但写成 就是反模式
• 注意：服务端注入 critical CSS 到 标签是 OK 的，但那是 块，不是 style 属性

真正容易被忽略的是加载时机链：HTML 解析 → 遇到 → 触发 CSS 下载 → CSSOM 构建 → 与 DOM 合成 render tree。任何把 CSS 拖到后面（比如放在