link 标签引入外部 CSS 文件最稳妥
绝大多数项目该用 <link>，不是 @import 也不是内联 style。它支持并行加载、可被浏览器预加载器识别、不影响渲染阻塞逻辑（只要没加 blocking 属性），而且 CDN 缓存、HTTP/2 复用都靠它。
常见错误是把 <link> 放在 里，导致样式晚到、页面闪动；或漏写 rel="stylesheet"，浏览器直接忽略该标签。
-
<link rel="stylesheet" href="styles.css">必须放在中 - 路径别写错：
href="./css/main.css"和href="/css/main.css"行为完全不同 - 需要媒体查询时直接加
media属性：<link media="(prefers-color-scheme: dark)" ...> - 避免在
<link>上滥用onload回调——它不保证样式已生效，DOM 可能还没重绘
style 标签写内联 CSS 要控制粒度
适合小范围、动态生成、或 SSR 首屏关键样式（比如防止 FOUC）。但写多了会污染 HTML、无法复用、也不走缓存。
容易踩的坑是把整套主题色变量全塞进 <style></style>，结果每次改颜色都要重新生成 HTML；或者用 JS 拼接字符串注入 <style></style>，却忘了清理旧节点，造成内存泄漏。
立即学习“前端免费学习笔记（深入）”；
- 只放首屏必需样式，例如
body { margin: 0; font-family: sans-serif; } - 变量尽量用
:root声明，别重复写死值：:root { --primary: #3b82f6; } - JS 动态插入时，优先用
document.adoptedStyleSheets（现代浏览器），而非反复增删<style></style>标签
内联 style 属性仅用于临时覆盖
style 属性只该出现在“必须由 JS 实时计算并应用”的场景，比如拖拽位置、动画进度、表单校验提示色。它优先级最高，会覆盖所有外部和内部样式规则，极难调试。
典型错误是用 element.style.color = "red" 控制状态，结果后续 CSS 类切换失效；或循环中不断赋值 style.transform 却没节流，引发强制同步布局。
- 避免在循环或高频事件中直接操作
style，改用 class 切换 + CSS 过渡 - 需要 JS 控制动画时，优先用
element.animate()或CSS.supports()检测后降级 -
style属性设的是字符串，单位不能省：el.style.width = "200px"，不是"200"
@import 在 CSS 文件里慎用
@import 写在 CSS 文件里等于“阻塞式加载”，浏览器必须下载并解析完当前文件，才能发起 @import 的请求，链式加载会拉长整体样式就绪时间。它已经基本被 <link> 取代。
唯一还可能见到它的场景是：老项目兼容 IE9–，或某些构建工具（如 Sass）编译前的模块导入。但注意，Sass 的 @import 是编译期行为，和运行时的 CSS @import 完全不同。
- 纯 CSS 文件中出现
@import url("reset.css");—— 删除，改用<link>并行加载 - Sass/Less 文件里的
@import "vars";是合法的，但建议迁移到@use（Sass 4.0+）以避免全局污染 - 如果必须保留，确保
@import在文件顶部，且路径是相对当前 CSS 文件，不是 HTML 页面
