面包屑导航必须用 包裹并配 aria-label，内部用 嵌套 保证语义与顺序；BEM 类名须严格对应层级，分隔符优先用伪元素实现，响应式需保留首尾及当前页上下文。
面包屑导航必须用 <nav></nav> 包裹，否则语义丢失
屏幕阅读器和搜索引擎靠 HTML 结构识别导航意图，只靠 CSS 样式无法传递“这是导航”的语义。用 <ol></ol> 嵌套 <li> 是行业共识，因为面包屑本质是有序的层级路径。
常见错误：用 <div> + <code>display: flex 模拟，再加一堆 aria-label 补救——这等于绕开语义直接写样式，维护成本高、可访问性差。
- 正确结构：
<nav aria-label="当前位置"><ol class="breadcrumb"> <li class="breadcrumb__item"><a href="/" class="breadcrumb__link">首页</a></li> <li class="breadcrumb__item"><a href="/shop" class="breadcrumb__link">商品</a></li> <li class="breadcrumb__item breadcrumb__item--current">详情页</li> </ol></nav> -
aria-label必须写在<nav></nav>上，不能丢；breadcrumb__item--current用于标记当前页，不加链接，避免跳转逻辑混乱 - 不要用
<ul></ul>，顺序不可逆是关键——“首页 > 分类 > 当前页”不是并列关系
BEM 类名要严格对应 DOM 层级，不能跨层命名
BEM 的核心是“块（block）→ 元素（element）→ 修饰符（modifier）”，类名里出现的下划线数量和位置，必须和 HTML 中的嵌套深度一致。比如 breadcrumb__item 只能是 breadcrumb 的直接子元素，不能出现在 breadcrumb__link 内部。
容易踩的坑：为了省事把当前页写成 <span class="breadcrumb__item--current"></span> 却放在 <a></a> 外面，导致 BEM 结构断裂，后续想加 hover 或 focus 样式时定位困难。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<li class="breadcrumb__item breadcrumb__item--current">详情页</li>（当前页是 item 的修饰，不是 link 的） - 错误：
<li class="breadcrumb__item"><a class="breadcrumb__link breadcrumb__link--current">详情页</a></li>（当前页不是链接，不该用 link 修饰符） - 所有类名必须以
breadcrumb开头，禁止出现nav__item或crumb-item这类脱离块名的写法
CSS 实现分隔符时，优先用伪元素而非真实字符
用 ::before 或 ::after 插入 / 或 > 更可控：它不参与文本流、不被复制粘贴、不影响焦点顺序，还能统一控制颜色/间距/响应式缩放。
如果在 HTML 里硬写 <span>/</span>，不仅增加无意义节点，还会让键盘 Tab 导航多跳一次，对残障用户不友好。
- 推荐写法：
.breadcrumb__item:not(:last-child)::after { content: "/"; margin: 0 0.5em; color: #999; } - 需要支持 RTL（从右向左语言）时，用
content: "\2044"（Unicode 分数斜杠）比普通/更稳妥 - 别用
border-right模拟分隔符——当最后一项有背景色或圆角时，视觉上会漏出半截边框
响应式断点要按内容折叠，不是按屏幕宽度粗暴隐藏
小屏下不是简单 display: none 掉中间项，而是保留首尾两项 + 当前页，用省略号连接。否则用户会丢失“我在哪一层”的上下文。
纯 CSS 实现较难，建议配合 JS 动态裁剪 <li> 数量，但 CSS 层仍需兜底：比如用 max-width 控制容器、用 text-overflow: ellipsis 处理单个文字过长。
- 基础响应式：
@media (max-width: 480px) { .breadcrumb__item:not(:first-child):not(:last-child) { display: none; } } - 更优方案：用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))配合grid-auto-flow: column让项自动换行，再用order调整首尾项位置 - 绝对禁止用
font-size: 0隐藏文字——它会让部分读屏器跳过整个<nav></nav>
最易被忽略的是焦点管理：当前页用 <span></span> 而非 <a></a> 时，必须确保它仍能被键盘 Tab 跳过（默认可聚焦），且 outline 样式不被重置。否则键盘用户卡在导航里出不去。
