link是唯一推荐的外链css方式；@import因串行阻塞、fouc、无法条件加载和动态注入，存在明确性能风险，且不支持media、preload及运行时控制。
link 标签是唯一标准且可靠的引入方式，其他手段（如 @import 在 CSS 内部导入、或用 JS 动态创建 link）要么性能差、要么不可靠、要么破坏可访问性，不建议用于主样式表。
为什么必须用 link rel="stylesheet" 而不是 @import
浏览器解析 HTML 时，link 标签能触发**并行下载**，CSS 文件和 HTML 可同时加载；而 @import 是 CSS 规则，必须等外层 CSS 解析到那一行才发起请求，造成**串行阻塞**，尤其多层嵌套时延迟明显。
-
@import在 CSS 文件里写，比如@import url("base.css");，它无法被预加载器识别，也不支持media属性的早期匹配 - 部分旧版 IE 对
@import的解析有 bug，可能忽略带 media 查询的导入 - 所有现代构建工具（Vite、Webpack、esbuild）默认不处理 CSS 中的
@import，除非显式配置，容易导致本地开发和生产行为不一致
href 路径怎么写才不容易出错
路径错误占外部 CSS 失效原因的 70% 以上。关键不是“对不对”，而是“是否可维护”。
- 优先用**根目录相对路径**：例如
href="/css/main.css"，以网站根目录（/）为起点，不受当前 HTML 文件所在层级影响 - 避免
../嵌套：像href="../../../styles.css"看似能跑通，但一旦 HTML 移动位置就立即失效，且难以快速定位来源 - CDN 或第三方库用完整 URL：如
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"，明确协议和版本，防止缓存污染 - 本地开发时，确保 Web 服务器已启动——直接双击打开 HTML 文件（
file://协议）会导致跨域限制，link加载失败且无提示
media 属性不只是为响应式准备的
media 不只用来写 screen and (max-width: 768px)，它还能控制资源是否参与初始渲染，直接影响性能和语义。
-
media="print"：仅在打印时加载，不影响页面首屏渲染速度 -
media="screen"：显式声明目标设备，比不写更利于浏览器预判用途 -
media="not all"：临时禁用某条link（调试用），比删代码安全，且保留注释上下文 - 注意：不要用
media="(min-width: 0px)"这类“兜底写法”来绕过媒体查询逻辑，它会误导浏览器和辅助技术
link，而是让整个项目中所有路径保持一致、所有 media 意图清晰、所有外部资源具备可验证的加载状态——这些细节在多人协作或长期迭代时才会暴露出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
