不能靠* { list-style: none }一刀切，因会误杀details/summary、自定义标记列表及ol[type="a"]等语义化序号，污染后代元素且破坏可访问性；应使用带作用域的sass混入按需重置。
ul、ol、li 默认样式为什么不能靠 * { list-style: none } 一刀切
因为通配符重置会误杀 details、summary 和自定义标记列表（如用 data-list-type 控制的嵌套菜单），而且浏览器对 ol[type="A"] 等语义化序号的支持会被直接抹掉。更关键的是，* { list-style: none } 会污染所有后代元素——比如弹窗里一个临时渲染的 <ul></ul> 也会丢掉符号，调试时很难定位。
@mixin reset-lists() 必须显式调用，且只作用于目标容器
正确做法是在 _reset.scss 中定义带作用域的混入，不直接输出 CSS：
@mixin reset-lists {
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
}
}
使用时必须手动注入到具体上下文：
- 全局重置：在
html或body下调用@include reset-lists; - 局部隔离：比如只清空卡片内容区的列表，写
.card__content { @include reset-lists; } - 避免和第三方组件冲突：若用了 Ant Design，它的
.ant-list已有完整样式，就别在全局调用这个混入
如何保留部分语义化列表行为？用开关变量控制粒度
硬编码重置会破坏可访问性，比如屏幕阅读器依赖 ol 的序号信息。应该用 Sass 变量按需启用：
$reset-lists-enable-ol: false !default;
$reset-lists-enable-ul: true !default;
<p>@mixin reset-lists {
@if $reset-lists-enable-ul {
ul { list-style: none; margin: 0; padding: 0; }
}
@if $reset-lists-enable-ol {
ol { list-style: none; margin: 0; padding: 0; }
}
li { margin: 0; padding: 0; }
}</p>
项目中按需传参：
- 后台系统（纯 UI 列表）：
@use "reset" with ($reset-lists-enable-ol: true); - 内容站点（需保留有序列表）：
@use "reset" with ($reset-lists-enable-ol: false);
注意：Sass 的 with 参数只影响当前模块，不会泄漏到其他 @use 模块——这点比 @import 安全得多。
list-style-type 被重置后，如何快速恢复特定类型？
重置不是终点，而是起点。常见需求是「默认清空，但某几个地方要加回圆点或数字」：
- 恢复无序列表圆点：
.nav-menu > li { list-style-type: disc; } - 恢复有序列表字母：
.toc { list-style-type: upper-alpha; } - 用伪元素手动补符号（兼容老浏览器）：
li::before { content: "• "; margin-right: 0.5em; }
真正容易被忽略的是：重置后 ul ul 的缩进丢失，必须显式补 padding-left，否则嵌套菜单视觉坍塌——这不是重置的问题，是重置后你忘了重建层级关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
