如何避免在CSS BEM中过度使用双下划线命名？-css教程-PHP中文网

双下划线__是bem不可替代的语法基石，误用导致命名膨胀和语义混乱；正确做法是按块重构语义边界、提取独立块或重命名元素，而非删减__或改用其他分隔符。

如何避免在css bem中过度使用双下划线命名？

双下划线 __ 不能“避免使用”，它是 BEM 的语法基石，删减或绕开它只会让结构失效、工具链失灵、协作崩盘。真正要解决的不是 __ 本身，而是误用它导致的命名膨胀和语义混乱。

这不是“用了太多 __”，而是把 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，丢失修饰符