list-style: none 是极简导航的起点，它移除列表符号但不重置 margin 和 padding，需配套 ul { padding: 0; margin: 0; } 才真正“清障”；搭配 display: flex 横排、a 样式重置、无障碍 js 交互，构成完整极简导航方案。
为什么 list-style: none 是极简导航的起点
因为默认的
- 自带圆点或数字标记，还带默认内外边距，不干掉它，根本谈不上“极简”。
- 必须配套写
ul { padding: 0; margin: 0; } - 如果用
display: flex布局，list-style: none依然必要——否则某些旧版 Safari 仍可能渲染符号 - 别只写在
li上，要写在ul或ol容器上才生效 -
ul { display: flex; }就够了，不需要给每个li单独设display - 加
gap: 1rem替代老式margin-right，避免最后一个元素多出空白 - IE11 对 Flex 支持有限，如需兼容，得加
-ms-flexbox前缀，但多数新项目可忽略 - 至少写这四行：
a { color: inherit; text-decoration: none; }+a:hover { color: #007bff; } -
color: inherit让链接色跟随父容器（比如nav设了color: #333），比硬编码更灵活 - 如果导航需要点击反馈，用
background-color或border-bottom比改文字色更稳妥，视觉干扰小 - CSS 层面仍用
.nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s; }控制展开动画 - JS 只负责切
openclass，所有样式逻辑留在 CSS 里，便于维护 - 别忘了给按钮加
aria-expanded和aria-controls，否则无障碍支持直接归零
list-style: none 不是装饰性操作，是清障第一步——它直接移除 li 的列表符号，但注意：它不碰 margin 和 padding，这两项得手动归零，否则左右仍有空白，视觉上还是“不干净”。
常见错误现象：list-style: none 加了但菜单项依然缩进、错位，大概率是浏览器默认 ul 的 padding-left 在作祟。
display: flex 比 float 更可靠地横排导航项
老教程常教用 float: left，但现在会引发父容器高度塌陷、清除浮动麻烦、响应式适配吃力等问题。用 display: flex 是更直接的解法，一行代码就能让 li 横向排列且自动对齐。
使用场景：单行顶部导航、底部工具栏、侧边图标菜单都适用；但要注意，Flex 默认主轴是 row，若想竖排（比如侧边栏），得加 flex-direction: column。
链接样式要重置，否则下划线和颜色毁掉极简感
浏览器默认给 a 加蓝色文字和下划线，这和“极简”完全冲突。必须显式重置，而且顺序很重要：先清默认，再设新样式，否则伪类（如 :hover）可能不生效。
容易踩的坑：只重置 a，却忘了 a:visited 仍可能是紫色；或者用了 text-decoration: none 但没设 color，导致文字继承父级灰度而难以辨识。
移动端折叠菜单不能只靠 CSS，得加最小交互支撑
纯 CSS 实现汉堡菜单（比如用 :checked + 隐藏/显示）看似极简，但实际体验差：无法键盘操作、屏幕阅读器不可访问、Safari iOS 有时不触发状态切换。真要极简又可用，至少得补一行 JS 控制 class 切换。
性能影响很小——就一句 document.querySelector('.menu-toggle').onclick = () => nav.classList.toggle('open');，比引入整个框架轻得多。
极简不是删功能，而是把复杂藏在恰到好处的位置——比如 list-style: none 看似只是去个点，实则撬动了整个布局控制权；而一个 toggle class，比二十行 CSS 伪类更经得起真实用户折腾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
