Reset不能只写死数值，因为重置本质是建立可维护基线：body font-size应设为CSS变量（如--base-font-size:16px），表单控件须用font:inherit确保继承链畅通，box-sizing需显式覆盖伪元素和SVG，且normalize.css必须在所有含变量的CSS之前加载。
为什么Reset里不能只写死数值？
因为重置不是“归零”，而是建立可维护的基线。比如 body 的 font-size 设为 16px，后续所有 rem 计算都依赖它；但若项目要支持动态字体缩放、暗色模式适配或响应式字号切换，硬编码就立刻卡死。
常见错误现象：改一个 16px 得全局搜替换，h1 的 font-size: 2.5rem 在移动端突然过大却没法按比例收缩——本质是基线值没暴露为变量，无法被媒体查询或 JS 控制。
-
:root中声明--base-font-size: 16px，然后body { font-size: var(--base-font-size); } - 所有用到
rem的地方自动继承变化，无需改选择器 - 媒体查询中重定义：
@media (min-width: 768px) { :root { --base-font-size: 18px; } }
表单控件重置为什么必须用 font: inherit 而不是固定值？
Reset 中常把 input、button 的 font-size 强制设为 100% 或 1rem，但这会切断继承链——如果父容器用了 CSS 变量控制字号（比如 --text-size-sm: 0.875rem），子表单控件根本收不到。
真正可靠的做法是让它们主动继承，再靠变量统一调控：
立即学习“前端免费学习笔记（深入）”；
button, input, select, textarea { font: inherit; line-height: normal; }- 确保
font-size在 DevTools 的 Computed 面板显示为 “inherited from body”，而不是具体像素值 - 若需局部调整，直接改父级的
--text-size变量，不用碰表单选择器
box-sizing: border-box 覆盖不到伪元素和 SVG 就会出事
老式 Reset 写 * { box-sizing: border-box; } 看似覆盖全，但 ::before、::after 和内联 <svg></svg> 默认仍用 content-box。结果就是：你给卡片加了 padding，伪元素却撑出滚动条；SVG 图标在 Flex 容器里尺寸错乱。
现代写法必须显式包含：
*, *::before, *::after, svg { box-sizing: border-box; }- 如果用了 CSS 变量控制间距，比如
--spacing-xs: 4px，那所有padding、margin都该基于变量，而非硬写4px - 否则响应式断点切换时，
padding不变而容器宽度缩了，布局直接挤崩
Normalize.css 和变量一起用时顺序和作用域不能错
normalize.css 是基线定义者，不是兜底样式——它必须在所有自定义 CSS（包括含变量的样式）之前加载。一旦你把 :root { --color-primary: #007bff; } 放在 normalize.css 前面，某些 UA 样式（比如 button 的默认 font）可能已生效，变量还没机会接管。
容易踩的坑：
- 在
index.html中，<link rel="stylesheet" href="normalize.css">必须是第一个<link> - 用 Vite/Webpack 时，别在某个组件
<style></style>里@import，会导致打包顺序不可控 -
:root变量声明必须紧接在normalize.css后加载，否则var(--base-line-height)在p上可能读不到
最麻烦的是变量作用域漏掉伪类或 SVG：比如 svg:hover { fill: var(--icon-hover); }，但 --icon-hover 只在 .card 里声明，那全局 SVG 就取不到——这种问题不会报错，只会静默失效。
