双下划线__是bem的语义分隔符而非视觉优化，用于工具链精准识别块-元素边界；删减或替换会导致解析失效、样式丢失、协作混乱。
双下划线 __ 不是用来“优化视觉简洁度”的，它是 BEM 的语义分隔符，删减或替换它不会让 CSS 更清爽，只会让结构失效、团队协作崩盘。
为什么不能减少或“优化”双下划线 __
BEM 的 __ 不是装饰，是解析契约：工具链（如 PostCSS 插件、BEM 命名校验器、JS 选择器提取函数）靠它精准识别「块-元素」边界。写成 menu_item 或 menu-item，item 就可能被误判为块名，导致 menu__item--active 这类修饰符无法匹配、样式丢失。
常见错误现象：
- VS Code 的 BEM 自动补全插件不触发，因为输入
menu后敲_没反应——它只监听__ - 构建时 cssnano 合并类名，把
button__icon button__icon--hidden压成button__icon，--hidden修饰符直接消失 - 新人在 JS 里用
el.querySelector('.menu-item')找不到元素，因为真实类名是menu__item，而他以为下划线只是风格习惯
真正该处理的不是 __，而是嵌套过深的 HTML 结构
所谓“过多双下划线”，往往来自错误的 DOM 层级设计，比如强行写出 user-card__content__avatar__badge。这不是 __ 太多，是结构违反了 BEM 原则。
-
__只能出现在块名之后、且仅一层：正确是user-card__avatar，错误是user-card__content__avatar - 深层子节点应回归到原始块上下文：想样式化头像右上角的小红点，应定义新元素
user-card__avatar-badge，而不是从 content 往下延伸 - 如果某部分逻辑独立、可复用（如 badge），就该拆成独立块：
badge+badge--unread，再组合使用：<div class="user-card__avatar"><div class="badge badge--unread"></div></div>
让 BEM 写起来不啰嗦的实操办法
手敲 header__nav__item__link 确实累，但这不是规则问题，是工作流没配好。
- 在 VS Code 安装
PostCSS Language Support+BEM Tools插件，输入header后按Tab可自动补全header__logo、header__nav等预设元素 - 组件顶部加注释模板：
// @bem user-card, user-card__avatar, user-card__name, user-card--featured，供 IDE 提示和新人快速对齐 - 用工具函数生成类名，避免字符串拼接：
getBlock('user-card') + '__avatar'比硬写安全，也方便后续统一替换前缀 - 禁用构建工具中会破坏 BEM 的压缩项：Vite 中关掉
cssnano的mergeLonghand和reduceTransforms
最常被忽略的一点：BEM 的 __ 和 -- 是强约定，不是可选项。它不解决“写起来烦”的问题，而是解决“改完别人看不懂、上线后样式飞了、查 bug 找不到源头”的问题。省掉两个字符，换来的是调试半小时和团队命名撕扯一整天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
