底部导航栏bem命名必须体现容器—元素—修饰符三层关系：.bottom-nav为块，.bottom-nav__icon等为元素，.bottom-nav__item--current等为状态修饰符；禁止平台、数量、实现细节类名。
底部导航栏的BEM命名要体现「容器—元素—修饰符」三层关系
移动端底部导航栏不是简单套个 .footer 或 .nav 就完事。BEM要求类名必须清晰表达结构层级和语义，避免歧义。核心是把「整个导航区域」作为 Block，内部图标、文字、选中态等作为 Element，不同状态（如当前页、禁用）作为 Modifier。
常见错误是写成 .bottom-nav__item--active 却没定义 .bottom-nav 这个 Block，或者把平台差异（如 iOS vs Android）混进 Modifier 里导致类名爆炸。
-
.bottom-nav：唯一 Block 名，不带任何平台、尺寸或主题前缀 -
.bottom-nav__icon、.bottom-nav__label、.bottom-nav__item：严格对应 DOM 中的子节点，不跨层（比如不用.bottom-nav__item-icon） -
.bottom-nav__item--current、.bottom-nav__item--disabled：Modifier 描述状态，不描述样式（如--blue或--large是反模式）
如何处理 iOS 安全区（safe-area-inset-bottom）与 BEM 的兼容
BEM 管命名，不管布局逻辑，但安全区适配常被误当成“样式问题”塞进类名里。实际应由 CSS 自身处理：.bottom-nav 保持语义纯净，通过属性选择器或独立工具类控制内边距。
错误做法：.bottom-nav--ios 或 .bottom-nav__item--has-safe-area —— 这会让 HTML 变得平台耦合，且 JS 切换平台时需批量操作 class。
- 推荐在全局 CSS 中用
@supports (padding-bottom: env(safe-area-inset-bottom))包裹安全区适配规则 - 若需 JS 控制（如动态加载），用
data-safe-area="true"属性，配合.bottom-nav[data-safe-area]选择器，不污染 BEM 类名 - 绝对不要在 BEM 类名中出现
ios、android、notch等硬件/系统关键词
Tab 数量变化时，BEM 类名要不要加 --4-items 这类修饰符
不需要。BEM 的 Modifier 应反映组件的「固有状态」，而不是「外部数量特征」。Tab 数量由数据驱动，属于运行时变量，硬编码进类名会导致维护成本飙升（比如从 4 个删到 3 个，就得改 HTML、CSS、测试用例）。
真正该做的是让 .bottom-nav__item 具备弹性布局能力，用 flex: 1 或 grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) 自适应宽度。
- 避免：
.bottom-nav--3-items、.bottom-nav__item--width-25 - 允许：
.bottom-nav--hidden（整体显隐）、.bottom-nav--scrollable（内容超长启用滚动）—— 这些是组件自身可配置的行为 - 数量相关逻辑全部交给 CSS Flex/Grid +
:nth-child或伪类处理，不暴露到类名层
图标字体 vs SVG 图标对 BEM 类名的影响
图标实现方式不影响 BEM 结构，但会影响 Element 的粒度划分。关键看 DOM 是否真实存在「图标容器」节点。
如果用字体图标：<span class="bottom-nav__icon"></span>，那么 .bottom-nav__icon 就是合法 Element；如果用 inline SVG，且 SVG 是 .bottom-nav__item 的直接子元素，就不必额外加 __icon —— 因为 SVG 本身已是语义化标签，强行套 BEM 反而冗余。
- SVG 作为背景图时，仍用
.bottom-nav__icon，靠background-image实现，保持结构一致 - 若项目统一用 Web Components 封装图标（如
<icon-home></icon-home>），则 BEM 类名只作用于宿主元素，图标内部不参与 BEM 命名 - 禁止出现
.bottom-nav__icon-font或.bottom-nav__icon-svg—— 实现细节不属于 BEM 范畴
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
