CSS引入方式有哪三种？怎么选？
2026-02-18 23:09:50
0浏览
收藏
CSS引入方式并非随意选择，而是有严格优先级和适用边界的性能决策：生产环境必须使用``标签引入，因其支持并行加载、`preload`预加载、媒体查询精准匹配及HTTP/2多路复用，是唯一能保障关键渲染路径高效执行的方式；`@import`仅限调试时临时使用，它强制串行加载、触发FOUC且无法被预加载器识别，实为性能陷阱；内联`style`属性则仅适用于极少数单次动态场景（如SSR首屏关键样式或JS实时控制元素状态），但会破坏样式可维护性、无法使用伪类与CSS变量，且不可缓存。真正影响页面性能的，是CSS加载时机如何嵌入HTML解析→CSSOM构建→渲染树合成这一关键链条——选错引入方式，轻则闪动，重则阻塞整个页面渲染。
直接说结论：项目里该用 ，调试时可临时用 @import，内联样式（style 属性）只在极少数动态场景下用——不是“三种都能用”，而是有明确优先级和边界。
什么时候必须用
这是唯一支持并行加载、可被浏览器预加载（preload）、能设置 media 条件、支持 HTTP/2 多路复用的引入方式。几乎所有生产环境都靠它。
- 不阻塞 HTML 解析（只要没加
blocking属性），但会阻塞后续 JS 执行（关键渲染路径上） rel="preload"可提前拉取关键 CSS：<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
- 媒体查询生效早于 DOM 构建：
，对应设备一打开就按条件加载 - 服务端渲染（SSR）或静态站点生成（SSG）中，只有
能被正确提取和注入
@import 在 CSS 文件里引入其他 CSS 的问题
它写在 CSS 里（比如 main.css 开头），不是 HTML 中的标签。看起来方便，实际是性能陷阱。
- 强制串行加载：浏览器必须先下载并解析完当前 CSS，才能发起
@import指向的资源请求 - 无法被预加载器识别，
preload对它完全无效 - 在
@import后面定义的样式，可能因加载延迟导致 FOUC（内容闪动） - 仅在 IE5+ 和现代浏览器中支持，但 Safari 旧版本对嵌套
@import有解析 bug - 示例（不推荐）：
@import url("reset.css");<br>@import "theme.css";
内联样式 style 属性该不该写进 HTML 标签
只在「单次、不可复用、强绑定元素状态」的场景下合理，比如服务端渲染首屏关键样式、JS 动态控制某个元素显隐/位置。
- 没有网络请求开销，但无法缓存，每次 HTML 重载都要重新传输
- 破坏样式与结构分离，维护成本高；CSS 选择器权重也容易失控（
!important更难覆盖） - 无法使用伪类（
:hover）、媒体查询、CSS 变量等高级特性 - React/Vue 等框架中，
style={{ opacity: isLoaded ? 1 : 0 }}是合法用法；但写成
