不能直接@import 'normalize.css'，因其无作用域、不可配置、易与第三方库冲突，且无法解决项目特有样式问题；应改用带变量控制和作用域限定的@mixin封装复位逻辑。
别用 * { list-style: none } 或全局 html { margin: 0 } —— 这类硬编码重置会污染语义、破坏可访问性、与第三方组件冲突，且无法按需启用/关闭。
为什么不能直接 @import 'normalize.css' 到 main.scss 顶部
Normalize 是通用修复，不是项目级复位；它不解决你自己的组件默认边距、列表符号或表单控件样式问题。更关键的是：@import 会把所有规则注入全局作用域，一旦你后续引入 Bootstrap 或 Ant Design，它们自带的 reset 就可能叠加冲突，导致 button 的 padding 被设两次、ul 的 margin 被清两遍。
- Normalize 保留
ol[type="A"]和details/summary的 UA 行为，但你的导航菜单里一个ul可能真需要list-style: none - 它不处理你自定义的
.card__content里嵌套的ul，也不管form input在不同浏览器下的默认高度差异 - 想局部禁用某段重置？做不到 ——
@import没有作用域
@mixin reset-lists() 必须带作用域且支持开关变量
真正可复用的复位逻辑不是输出 CSS，而是提供一个可调用、可配置、可隔离的入口。比如列表重置：
- 必须用
@mixin reset-lists封装，而不是直接写ul, ol { list-style: none } - 内部用
$reset-lists-enable-ul: true !default和$reset-lists-enable-ol: false !default控制粒度，避免误杀有序列表的语义 - 调用时明确限定作用域：
.nav-menu { @include reset-lists; }，而非body { @include reset-lists; } - 若组件库（如 Element Plus）已定义
.el-menu样式，就绝不在全局html下调用这个 mixin
如何安全地重置表单控件和内联元素
表单元素是重置盲区：Chrome 给 input[type="search"] 加了圆角和图标，Safari 给 textarea 设了默认 resize，Firefox 对 select 的下拉箭头渲染完全不同。硬写 input { border: 0; outline: 0; } 会丢掉 focus 状态可访问性。
- 用
@mixin reset-form-controls封装，并区分input、textarea、select、button的重置粒度 - 对
appearance: none加前缀回退：-webkit-appearance: none; -moz-appearance: none; - 保留
:focus-visible样式，不盲目删outline；可用变量控制：$reset-forms-keep-focus-outline: true - 内联元素如
span、em不该被重置 —— 它们本就不带默认 margin/padding，加* { margin: 0 }反而干扰文字流
最易被忽略的一点：所有复位 mixin 都不该在 _base.scss 里自动展开，而应只定义、不调用。是否启用、在哪启用、启用了哪些子项，必须由业务层显式决定 —— 否则“可复用”就退化成“不可控”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
