应优先使用 normalize.css 而非手写 * { margin: 0; padding: 0 }，因其保留语义化默认样式、仅修正浏览器差异，且需正确导入顺序、避免与 ui 库重复、局部重置推荐 all: unset 并显式继承关键属性。
直接用 normalize.css 而不是手写 * { margin: 0; padding: 0 }
手写通配符重置会破坏 button、input[type="search"]、details 等元素的语义化默认行为，后续反而要花更多时间补样式。normalize.css 是经过大量浏览器测试的成熟方案，它只修正渲染差异（比如 h1 在 Chrome 和 Firefox 中的 margin 不一致），同时保留合理的 UA 样式（如 select 的下拉箭头、textarea 的可拖拽手柄）。
实操建议：
- 运行
npm install normalize.css，然后在项目入口 SCSS 文件（如main.scss）顶部用@import 'normalize.css' - 别把
normalize.css和自定义 reset 混着 import——顺序错一丁点，ul的list-style就可能被覆盖成none - 如果项目已用 Bootstrap 或其他 UI 库，先确认它是否自带 reset；重复导入会导致
font-size、line-height等基础值被多次覆盖
局部重置时优先用 all: unset 而非 all: revert
当只需重置弹窗内容区、卡片内部等特定区域时，全局 reset 显得过重。这时用 .modal-content * { all: unset; } 更可控：它把所有属性设为初始值（margin: 0、font-weight: normal），再配合显式继承需要的属性（如 font-family: inherit）即可。
all: revert 会回退到浏览器 UA 样式表的值，但不同浏览器 UA 表对同一元素的定义可能不同（比如 Safari 对 pre 的 white-space 处理就和 Chrome 不一样），容易引发不一致。
实操建议：
- 局部重置后必须显式声明关键继承属性，否则文字会丢失
font-family、color等 - 避免对
body或html使用all: unset——它会清掉font-size和line-height，导致整个页面文字不可读 - 若需保留部分默认行为（如
blockquote的缩进），改用选择器逐个重置，比all更安全
Sass 中按需定制 normalize.css 的变量和规则
normalize.css 本身是纯 CSS，但它的 Sass 版本（如 modern-normalize）支持变量覆盖。例如，项目要求基础字号为 18px、行高为 1.6，可以直接改写变量而非覆盖整条规则。
实操建议：
- 安装
modern-normalize（更轻量）：npm install modern-normalize - 在
base/_reset.scss中这样写：
@use 'modern-normalize' with ( $base-font-size: 18px, $base-line-height: 1.6 );
注意：@use 不会污染全局作用域，但 normalize 类规则本身无法被命名空间隔离——所以仍要确保它在所有组件样式之前加载。
若需额外重置表单控件，默认的 normalize 并不处理 input 的 border 和 padding，可追加：
input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
老项目改造时，别删原始 reset.css，先把它转成 Sass 变量+混入
很多老项目里堆着几十行裸写的 div, p, ul { margin: 0; padding: 0; }，直接删掉风险高。更稳妥的做法是把它们封装成 @mixin reset-block，再用 @include reset-block 替换原有代码块——既保持功能不变，又为后续模块化铺路。
实操建议：
- 新建
abstracts/_reset-mixins.scss，定义：
@mixin reset-block {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// 使用时
.container {
@include reset-block;
}
这样做的好处是：后续想给某些容器加例外（比如只重置 padding 不动 margin），只需改混入参数，不用翻原始 CSS。
真正容易被忽略的是重置顺序：Sass 编译后，@import 的位置决定了 CSS 规则的层叠优先级。哪怕只差一行，normalize 也可能被后面某个 base/_typography.scss 里的 h1 { margin: 0 } 覆盖掉——最终表现就是标题没间距，却查不出哪行代码动的手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
