双下划线__是BEM不可替代的语法基石，误用导致命名膨胀和语义混乱；正确做法是按块重构语义边界、提取独立块或重命名元素，而非删减__或改用其他分隔符。
双下划线 __ 不能“避免使用”，它是 BEM 的语法基石，删减或绕开它只会让结构失效、工具链失灵、协作崩盘。真正要解决的不是 __ 本身，而是误用它导致的命名膨胀和语义混乱。
为什么 header__nav__item__link 这种写法是错的
这不是“用了太多 __”，而是把 DOM 嵌套层级直接映射到类名，违反了 BEM “元素只属于一个块”的核心原则。
-
header__nav__item暗示item是nav的子元素，而nav又是header的子元素——但 BEM 不承认这种嵌套关系 - 正确做法是：所有视觉单元都应回归到最外层块上下文，比如
header__nav和header__link是并列元素；如果链接逻辑独立，就该拆成新块nav-item - 构建工具（如 PostCSS BEM 插件）会把
header__nav__item当作非法类名忽略，VS Code 的 BEM 补全也不会响应
深层节点该用什么代替 __ 嵌套
当看到 user-card__content__avatar__badge 这类类名时，第一反应不是“怎么缩写 __”，而是重构语义边界。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 优先提取为独立块：
badge+badge--unread，再组合使用：<div class="user-card__avatar"><div class="badge badge--unread"></div></div> - 若必须保留在卡片内，应重命名语义而非延长链路：
user-card__avatar-badge（表示“头像上的徽章”，不是“内容里的头像里的徽章”） - 禁止用
user-card__content-avatar-badge或user-card__content_avatar_badge—— 单下划线或中划线无法被 BEM 工具识别，content-avatar-badge会被误判为块名
手敲 __ 确实累？配好工具比改规则更有效
抱怨 button__icon 写起来麻烦，本质是开发流没对齐 BEM 的契约要求。
立即学习“前端免费学习笔记（深入）”；
- VS Code 安装
BEM Tools插件，输入button后按 Tab 就能补全button__icon、button__text等预设元素 - 组件顶部加注释模板：
// @bem button, button__icon, button__text, button--loading，供 IDE 提示和新人快速对齐 - 用工具函数生成类名，比如
getBlock('button') + '__icon'，比字符串拼接安全，也方便后续统一替换前缀 - 禁用构建工具中破坏 BEM 的压缩项：Vite 中关掉
cssnano的mergeLonghand和reduceTransforms，否则button__icon button__icon--hidden会被压成button__icon，丢失修饰符
最容易被忽略的是：__ 和 -- 是强约定，不是风格偏好。它不决定代码“好不好看”，而是决定样式是否可被机器识别、能否在团队里稳定传递、会不会在某次构建后突然失效。
