结论：是默认应使用的方式，@import在绝大多数现代项目中无合理使用理由——它阻塞渲染、串行加载、不支持条件预加载，且构建工具难以静态分析其依赖。
link 标签引入 vs @import 的实际差异
直接说结论：<link> 是默认该用的方式，@import 在绝大多数现代项目里没理由用——它会阻塞渲染、无法并行加载、不支持媒体查询的条件预加载，而且在 CSS 文件里写 @import 还会让构建工具（比如 Webpack、Vite）难以静态分析依赖。
常见错误现象：把 @import 写在 main.css 顶部，结果首屏白屏时间变长，Lighthouse 报 “Render-blocking resource”；或者用 PostCSS 处理时，@import 被当成普通 CSS 规则忽略，导致样式丢失。
-
<link rel="stylesheet" href="base.css">：浏览器能提前发现资源、并行下载、支持media属性做条件加载（如media="(prefers-color-scheme: dark)"） -
@import url("base.css");：必须等当前 CSS 解析完才发起请求，且所有@import串行执行 - 构建场景下，Vite 默认不解析 CSS 中的
@import（除非开启css.preprocessOptions配置），Webpack 的css-loader默认也不处理，容易漏掉依赖
style 标签内联 vs 外部文件引入的取舍点
内联 <style></style> 只适合极小量、首屏强相关、且不会复用的样式（比如 landing page 的 hero 区域字体/颜色），不是“为了减少请求”就往里塞。
容易踩的坑：把整套 Tailwind 或 Bootstrap 的 CSS 内联进 HTML，结果 HTML 文件暴涨 200KB+，gzip 效率低、无法缓存、服务端压力大；或者用 SSR 渲染时，每次生成 HTML 都重复注入相同样式块，浪费带宽。
- 外链 CSS 文件：支持强缓存（
Cache-Control: public, max-age=31536000）、CDN 分发、浏览器并发加载、HTTP/2 多路复用 - 内联 CSS：仅适用于 nonce 或
hash才能通过 CSP 策略 - Vite / Next.js 等框架中，
<style></style>标签若含scoped或module，会被编译为局部作用域，此时内联是合理设计，而非性能优化手段
构建工具里 import './xxx.css' 的行为本质
在 Webpack/Vite/Rollup 项目中写 import './index.css'，本质是让 JS 模块图里显式声明对样式的依赖，触发 loader（如 css-loader + style-loader）将 CSS 插入 DOM —— 它不是“替代 link”，而是构建时的依赖管理方式。
典型问题：开发时样式正常，build 后丢失；或热更新失效。根本原因常是 loader 配置缺失（比如忘了加 style-loader），或 CSS 路径别名没配对（@/styles/index.css 在 resolve.alias 里没定义）。
- 开发阶段：
style-loader把 CSS 注入，支持 HMR，但插入顺序依赖 JS 执行时机，可能被后加载的 CSS 覆盖 - 生产阶段：推荐用
mini-css-extract-plugin（Webpack）或rollup-plugin-css-only（Rollup）输出独立 CSS 文件，再由 HTML 插件自动注入<link> - 注意
import语句位置：放在 JS 入口最前 ≠ 样式最先应用；若多个import指向同一 CSS 文件，Webpack 默认去重，但 Vite 目前仍可能重复注入（需靠?inline或插件控制）
动态加载 CSS 时要注意的兼容性断点
用 loadCSS 或 createElemen('link') 动态插入样式，主要解决按需加载或主题切换，但不同浏览器对 onload 和 onerror 的触发时机不一致。
真实场景问题：在 iOS Safari 14.5 下，动态插入的 CSS 有时 onload 不触发，导致后续逻辑卡住；或 Chrome 中 CSS 加载完成但样式未生效（未等待 CSSOM 构建完毕）。
- 安全做法：不用原生
link.onload做依赖判断，改用document.styleSheets查找匹配href的 sheet，再检查sheet.cssRules.length > 0 - 避免在
DOMContentLoaded后立即动态插入，应等window.requestIdleCallback或setTimeout(..., 0)微任务边界，防止阻塞主流程 - SSR 场景下，动态加载的 CSS 无法参与服务端渲染，需额外处理 fallback（比如初始用 class 控制主题，再 JS 切换）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
