不能手写*重置，因其破坏button焦点轮廓、input图标、details箭头及ol语义序号，导致可访问性问题和样式修复混乱；应优先使用normalize.css或modern-normalize，并在main.scss首行@import确保前置生效。
别手写 * { margin: 0; padding: 0 }，也别在 main.scss 顶部堆砌多个重置文件——直接用 normalize.css 或 modern-normalize，再通过 Sass 的模块化路径精准导入。
为什么不能自己写通配符重置
手写 * { margin: 0; padding: 0; list-style: none } 看似省事，实际会破坏语义化渲染：
-
<button></button>失去默认边框和焦点轮廓，影响可访问性 -
<input type="search">的放大镜图标、<details></details>的折叠箭头直接消失 -
<ol type="A"></ol>这类带语义的序号被清空，屏幕阅读器无法识别顺序 - 后续必须反复补
ul { list-style: disc }、h1 { margin-top: 0.67em }等，越修越乱
应该用 normalize.css 还是 modern-normalize
两者都比手写 reset 更可靠，但选择取决于项目规模和兼容性要求：
-
normalize.css：覆盖全，适配 IE9+，包含对shadow DOM元素（如<video></video>内部控件）的处理，适合中大型项目 -
modern-normalize：仅保留现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2022）需统一的行为，体积小 3KB，无 IE 支持，适合新项目或 Electron/Vite 类环境 - 都支持 Sass 直接
@import，安装后路径为node_modules/normalize.css/normalize.css或node_modules/modern-normalize/modern-normalize.css
在 Sass 中正确导入和组织 reset 文件
关键不是“能不能导入”，而是“在哪里导、怎么导、会不会被覆盖”：
立即学习“前端免费学习笔记（深入）”；
- 新建
base/_reset.scss，内容为：@import 'normalize.css';（或对应路径），确保文件名以下划线开头，避免被误编译 - 在项目唯一入口
main.scss中，**第一行**就@import 'base/reset';—— 必须放在所有自定义样式之前 - 不要用
@use 'base/reset'：CSS 规则不支持命名空间隔离，@use对它无效 - 若已用 Ant Design、Element Plus 等组件库，检查其是否自带 reset；重复导入会导致
body行高、字体等被多次覆盖，建议禁用组件库内置 reset（如 Element UI 的el-reset）
需要局部重置时，用 all: unset 而非通配符
比如弹窗内容区要剥离所有默认样式，又不想影响全局，就不能靠 .modal * { ... }：
-
.modal-content { all: unset; }会把所有属性重置为初始值（margin: 0,font-weight: normal），太激进 -
.modal-content { all: revert; }更稳妥：回退到浏览器 UA 样式表值（p仍有margin: 1em），保留基本可读性 - 务必配合显式重设关键继承属性：
.modal-content { all: revert; font-family: inherit; line-height: inherit; color: inherit; } - 避免嵌套使用：
.card .modal-content { all: revert; }容易被父级样式干扰，应直接作用于最外层容器
真正容易被忽略的是导入顺序和组件库冲突——normalize.css 必须是 CSS 构建链里第一个生效的样式块，哪怕只差一行位置，都可能导致 button:focus 轮廓被后续规则静默覆盖。调试时看到样式被划掉，先查 DevTools 的 Styles 面板里该规则是否出现在最顶部，而不是急着加 !important。
