normalize.css 必须在所有自定义和第三方 css 之前加载，否则其基础校准（如 button { font-family: inherit; }、html { line-height: 1.15; }）会被后续样式覆盖，导致字体回退、textarea 失效、fouc 等问题。
为什么 normalize.css 会覆盖你写的自定义 CSS？
根本不是它“想”覆盖你，而是浏览器按 <link> 从上到下解析，normalize.css 里对 button、h1、p 等元素的声明，如果出现在你自定义 CSS 之后，就会被你的规则覆盖；但反过来——如果你的自定义 CSS 放在 normalize.css 前面，那它一加载完，就被 normalize.css 里更“基础”的重置规则盖掉了。
常见错误现象：h1 { font-size: 2rem; } 在开发时生效，构建后字体变小；DevTools 的 Styles 面板里这行被划掉，点文件名跳转发现它来自 normalize.css，且该 <link> 确实在你 CSS 之前。
- 检查最终 HTML 中
<link rel="stylesheet">的实际顺序，不是源码顺序，也不是 import 语句顺序 - Vite/Webpack 构建后，CSS 合并顺序由 JS 入口里的
import顺序决定，import 'normalize.css'必须写在所有 UI 库和自定义样式import之前 - 避免在自定义 CSS 文件里用
@import引入其他样式——它会让被 import 的内容实际加载时间晚于当前文件，彻底打乱层级
Bootstrap 5 自带 reboot.css，再加 normalize.css 就冲突？
是的，而且冲突方式很隐蔽：bootstrap/dist/css/bootstrap.min.css 已经内含 reboot.css（含 box-sizing 重置、body 行高、button 光标等），如果你额外引入 normalize.css，两个重置逻辑会打架。比如 reboot.css 设了 button { cursor: pointer; }，而 normalize.css 也设了 button { cursor: default; }，谁在后面谁赢。
真正要防的不是“多一个 reset”，而是“两个 reset 对同一属性做了不同假设”。
- 用 Bootstrap 5 就别再手动加
normalize.css，它的reboot.css已覆盖主要兼容性问题 - 若必须用
normalize.css（比如团队规范强制），则需关掉 Bootstrap 的重置：Sass 中设$enable-reboot: false，再单独@import "bootstrap/scss/reboot"替换为@import "normalize.css" - Tailwind 用户注意：它内置
preflight，功能等价于normalize.css+reboot.css，此时再引入任一外部重置库都属于冗余
为什么改了变量却没生效，反而被第三方库的 CSS 覆盖？
:root 里定义的 --bs-* 变量只影响 Bootstrap 内部使用这些变量的地方。如果你的自定义 CSS 是直接写死的 color: #0d6efd;，它根本不读变量，自然也不受变量修改影响；而第三方库（如 Ant Design）若写了 .ant-btn { color: #1890ff !important; }，这个 !important 就会压过你所有基于变量的渲染结果。
更麻烦的是：某些第三方库会在自己的 CSS 里也定义同名变量（比如 --primary-color），如果它加载在你之后，就可能污染全局作用域，导致 Bootstrap 的 var(--bs-primary) 实际取到的是第三方库设的值。
- 确认变量名拼写准确，Bootstrap 5.3+ 要求配套设置 RGB 版本，例如改
--bs-primary必须同步设--bs-primary-rgb - 不要在第三方库的 CSS 加载完成后才注入
:root变量——动态插入的<style></style>默认在末尾，天然晚于所有外部 CSS - 用
@layer（如@layer bootstrap { :root { ... } }）可显式控制层叠层级，但前提是构建工具支持（Vite 4.3+/Webpack 5.80+）且未关闭 CSS 层级解析
哪些地方最容易被忽略，却导致覆盖“静默发生”？
没有报错，没有警告，只是按钮边框变粗了、卡片间距不对了、表单输入框高度塌了一像素——这类问题往往卡在三个盲区：
-
box-sizing被覆盖：第三方库若在自己 CSS 里写了* { box-sizing: content-box; }，哪怕只有一行，也会让 Bootstrap 所有基于border-box的尺寸计算全部失效 - 伪元素被漏掉：你写了
.btn::before { content: ""; }，但第三方库的reboot.css里有*::before, *::after { box-sizing: border-box; }，这两者叠加可能触发旧版 Android WebView 崩溃 - 内联样式劫持：React/Vue 组件里用
style={{ width: '100%' }}生成的内联样式，特异性高于任何外部 CSS，连!important都压不住它
调试时别只盯着 Styles 面板里“哪个规则被划掉”，得看 Computed 面板里 width 和 computed width 是否一致——不一致，八成是 box-sizing 或 padding 在某处悄悄被改了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
