面包屑导航的BEM结构应以breadcrumb为块，严格使用breadcrumb__list、breadcrumb__item、breadcrumb__link、breadcrumb__text、breadcrumb__separator等元素与修饰符；分隔符须用:not(:last-child)::after伪元素实现；当前页禁用<a>改用<span>；折叠时通过breadcrumb__item--collapsed修饰符控制，确保语义、可访问性与样式解耦。
面包屑导航的BEM结构怎么写才不混乱
后台系统里面包屑常被写成嵌套过深的 <nav> 套 <ol> 套 <li>，结果一改样式就牵连全局。BEM要求每个模块自包含，面包屑必须整体视为一个块（breadcrumb），内部元素严格按 breadcrumb__item、breadcrumb__link、breadcrumb__separator 划分，不能让 li 或 a 自己承担语义和样式双重责任。
正确结构示例：
<nav class="breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__item">
<a href="/admin" class="breadcrumb__link">首页</a>
</li>
<li class="breadcrumb__item">
<a href="/admin/users" class="breadcrumb__link">用户管理</a>
</li>
<li class="breadcrumb__item breadcrumb__item--current">
<span class="breadcrumb__text">编辑用户</span>
</li>
</ol>
</nav>
-
breadcrumb__list是必须的包裹层，避免直接给ol写样式（否则影响其他列表） - 当前页用
breadcrumb__text而非breadcrumb__link，语义更准；加修饰符breadcrumb__item--current控制状态，不靠伪类或 JS 动态加类 - 分隔符不写死在 HTML 里（比如不用
>或/字符），统一由 CSS 的::before生成
分隔符用 CSS 伪元素还是字体图标
硬编码分隔符字符（如 <span class="breadcrumb__separator">/</span>）会导致中英文空格不一致、缩放失真、无法配色统一。BEM 推荐用伪元素控制，且只作用于非末项的 breadcrumb__item：
.breadcrumb__item:not(:last-child)::after {
content: "/";
margin: 0 8px;
color: #999;
}
- 用
:not(:last-child)比给每个分隔符单独加类更可靠，避免漏写或错位 - 如果设计稿要求箭头图标（如
→或 SVG），建议用background-image或内联<svg>，但 SVG 必须加class="breadcrumb__separator"并设width/height，不能依赖父容器尺寸 - 禁用
font-family: "iconfont"方式——后台系统字体加载不稳定时，分隔符可能空白或显示为方块
链接状态与可访问性容易忽略的点
后台面包屑里的 breadcrumb__link 常被写成无 href 的空链接或 JS 绑定 click，这会破坏键盘导航和屏幕阅读器识别。所有链接必须真实可跳转，且当前页用 <span> 替代，不是禁用 <a>。
立即学习“前端免费学习笔记（深入）”；
- 禁用
pointer-events: none或tabindex="-1"来“模拟”不可点击——这会让键盘用户卡住 - 悬停/焦点样式必须显眼：
breadcrumb__link:hover, .breadcrumb__link:focus至少要有背景色或下划线变化，否则触控设备或低视力用户无法感知 - 如果某级菜单是动态加载（如权限控制后隐藏），不要仅靠 CSS
display: none隐藏整个breadcrumb__item，需同步从 DOM 移除或加aria-hidden="true"
响应式折叠时如何保持 BEM 语义不崩
小屏下面包屑常折叠为「…」或下拉菜单，此时若直接用 JS 替换 HTML 结构（比如把中间几项塞进 <details>），BEM 类名就会断裂。正确做法是初始结构就预留折叠能力：
<li class="breadcrumb__item breadcrumb__item--collapsed"> <button type="button" class="breadcrumb__toggle">…</button> </li>
- 折叠逻辑用 JS 控制
breadcrumb__item--collapsed修饰符，CSS 只负责视觉表现，不干预结构 -
breadcrumb__toggle必须有aria-expanded和aria-controls，配合下拉内容的id，否则屏幕阅读器读不出展开状态 - 禁止用
visibility: hidden隐藏中间项——它仍占据布局空间且可聚焦，应改用display: none或移除渲染
最麻烦的其实是分隔符在折叠后的对齐：当 breadcrumb__item--collapsed 出现时，它前一项的 ::after 伪元素要消失，得额外写一条规则：.breadcrumb__item--collapsed:before 设 content: none，不然会出现「首页 / … / 编辑用户」这种错误分隔。
