必须写在里，否则浏览器不会按预期解析应用公共样式；需按vars.css→reset.css→base.css→页面样式顺序引入，确保变量可用、重置生效、组件复用、页面覆盖，路径须正确且rel属性严格小写带双引号。
<link rel="stylesheet"> 必须写在 里，否则公共样式大概率不生效——不是“偶尔失效”，而是浏览器根本不会按预期解析和应用它。
为什么公共样式必须用多个 <link> 按序引入
公共样式通常拆成逻辑层（如变量、重置、工具类、基础组件），靠加载顺序保障覆盖关系。浏览器按 <link> 在 HTML 中的出现顺序串行加载并构建 CSSOM，后加载的同名规则才能覆盖前面的。
- 变量文件（
vars.css）必须最先引入：自定义属性需在其他样式中可用 - 重置/标准化（
reset.css）紧随其后：清空浏览器默认样式 - 基础组件（
base.css）再之后：按钮、表单、表格等通用样式 - 页面专属样式放最后：确保它有最高层叠优先级，不被意外覆盖
顺序错乱会导致 color: var(--primary) 解析为 color: initial，或按钮边框被 reset.css 清掉却没被 base.css 补回。
href 路径写错是 90% 的“公共样式不生效”原因
路径基准永远是当前 HTML 文件的 URL，不是编辑器打开位置，也不是 CSS 文件所在目录。本地双击打开 HTML 时 file:// 协议下路径解析更脆弱，容易掩盖问题。
- 根相对路径最稳：
href="/css/vars.css"，无论 HTML 在/index.html还是/blog/post.html都指向同一位置 - 相对路径要手动推算：HTML 在
/pages/about.html，想引用/css/base.css，就得写href="../../css/base.css"，不是./css/base.css - Network 面板里看 “Initiator” 列，能直接定位是哪个
<link>发起了 404 请求 - 别用反斜杠：
href="css\style.css"❌，必须是正斜杠href="css/style.css"✅
rel="stylesheet" 缺失或拼错会静默失败
漏写、大小写错误（如 StyleSheet）、少引号（rel=stylesheet）、末尾空格（rel="stylesheet "）都会让浏览器完全忽略该标签——不发请求、不报错、Elements 面板能看到标签，但 Styles 面板里空空如也。
- 必须严格小写、带英文双引号、无多余空格：
rel="stylesheet" -
type="text/css"可删：HTML5 中已冗余，留着只多占字节 - 别混用
rel="import"或rel="preload"替代——前者已废弃，后者只是下载不应用，必须配一个真正的rel="stylesheet"才起效
最容易被忽略的是：多人协作时，有人把 <link> 放进 说“反正看起来没问题”，结果在弱网设备上首屏闪白、打印样式失效、SSR hydration 报错——这些都不是边缘 case，而是真实线上故障的常见起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
