最稳方式是用构建工具条件注入，如Webpack配合环境变量自动切换link与@import；不用构建工具则用注释+多光标快捷切换；注意@import性能差、兼容性低，内联style需加scope隔离，热更新应避免DOM全量替换，CSS不生效常因引入位置、语法错误或Shadow DOM作用域限制。
开发时怎么快速在 link 和 @import 之间切换
没必要手动改 HTML 或 CSS 文件来回替换。最稳的方式是用构建工具做条件注入，比如 Webpack 的 html-webpack-plugin 配合环境变量：
<%= htmlWebpackPlugin.options.cssMode === 'link' ? '' : '' %>
如果不用构建工具，直接写 HTML 开发，建议把两种方式都写上但用注释控制开关，再配合编辑器多光标（如 VS Code 的 Ctrl+D）一键取消注释：
-
@import在 CSS 文件里写，会阻塞后续资源下载，link是并行加载，性能差异明显 -
浏览器 DevTools 的 Network 面板里看
Initiator列，能立刻分辨是哪个引入方式触发的请求 - 某些旧版 IE 对
@import层级嵌套有限制（最多 4 层），link没这问题
用
开发阶段图快直接写 很常见，但容易导致样式覆盖混乱、热更新失效或同名选择器冲突。关键不是“少用”，而是“可控地用”：
- 给内联样式加唯一 scope 注释，比如
/* [dev-only] */，方便后续 grep 清理 - 用属性选择器临时隔离，例如
[data-dev-style] h1 { color: red; }，然后在 HTML 上加data-dev-style - Vite / Webpack HMR 下，
标签内容变更可能不会触发热更新，建议配合import.meta.hot或直接用 CSS Modules
如何让 CSS 热重载不丢失当前滚动位置和表单状态
纯 CSS 修改触发页面重绘时，浏览器默认会重置滚动位置和 的焦点/值。这不是 CSS 本身的问题，而是热更新机制导致 DOM 被整体替换。解决思路是绕过全量重载：
立即学习“前端免费学习笔记（深入）”；
- 用
document.styleSheets找到对应 sheet，调用replaceSync()（现代浏览器支持）或cssRules替换规则，不重建标签 - Vite 用户可启用
css.hmrOverlay并配合import.meta.hot.accept做增量 patch - 简单粗暴但有效：加一段脚本保存状态再恢复，例如监听
beforeunload存scrollY到sessionStorage，重载后读取
为什么有时改了 CSS 却看不到效果？几个高频盲区
不是缓存没清，也不是语法错，而是引入时机或作用域卡住了：
-
@import必须写在 CSS 文件最顶部，前面不能有任何非空行、注释或@charset以外的声明，否则整条语句被忽略 -
放在里，部分浏览器会延迟加载甚至不加载（HTML 规范要求放） - CSSOM 构建过程中，如果某条规则语法错误（比如漏了右括号、颜色值写成
color: #ffg;），它之后的所有规则都可能被跳过 - Shadow DOM 场景下，
引入的样式默认不穿透，得用:host或::slotted显式控制
真正麻烦的从来不是“怎么加”，而是“加在哪、谁生效、谁被盖住”。开发阶段多看 Elements 面板里的 Styles 树展开状态，比反复刷新更省时间。
