多单词BEM块名建议使用中划线连接，如`button-submit`或`modal-close`。这种方式清晰、规范，便于维护和理解。

BEM规范中多单词块名必须使用中划线（如user-profile）而非驼峰（userProfile）或下划线（user_profile），这并非风格选择，而是保障CSS合法性、语义清晰性、工具链兼容性与团队协作稳定性的硬性要求：中划线明确定义词界，避免选择器冲突和解析歧义；双下划线元素名（如user-profile__avatar）必须严格基于完整块名展开，确保层级不可拆分；现代构建工具、Lint规则和IDE插件均深度依赖中划线正则校验，违规命名将直接导致自动补全失效、CI校验失败、样式覆盖等真实线上问题——掌握这一“语法糖”，是写出可维护、可扩展、零歧义BEM代码的第一道防线。

多单词块名必须用中划线，不能用驼峰或下划线

中划线（-）是BEM中唯一被广泛接受的块名内连字符，不是风格偏好，而是规范硬性要求。用userProfile或user_profile当块名，会导致语义断裂、工具链解析失败、团队协作时理解偏差。

• user-profile ✅ 合规：清晰表达“用户”和“档案”两个语义单元，CSS选择器可读性强
• userProfile ❌ 违规：驼峰写法在CSS中不合法（.userProfile会被误读为类名user加伪类:Profile），且破坏BEM扁平命名原则
• user_profile ❌ 混淆：下划线在BEM中专用于修饰符（如button_disabled），混用会模糊Block与Modifier边界

中划线块名 + 双下划线元素 = 不可拆分的原子组合

块名一旦含中划线，后续所有__连接的元素名都必须基于完整块名展开，不能截断或缩写。常见错误是把user-profile当成两个词，错误写出user__avatar或profile__avatar。

• 正确：user-profile__avatar、user-profile__bio-section
• 错误：user__avatar（丢失-profile，不再是同一Block）、user-profile-avatar（漏掉__，变成新块名而非元素）
• 注意：user-profile__bio-section中的bio-section本身含中划线，仅作元素内部语义分隔，不改变层级关系

构建工具和IDE对中划线块名有隐式依赖

现代CSS工程化工具（如PostCSS BEM插件、stylelint-config-bem-stylint）默认按[a-z0-9]+(-[a-z0-9]+)*正则识别块名。若块名含下划线或驼峰，会导致：

• 自动补全失效（VS Code的Emmet或BEM Helper插件无法匹配user_profile）
• lint报错：Expected block name to match pattern "^[a-z][a-z0-9]*(-[a-z0-9]+)*$" (bem/valid-block-name)
• 组件提取脚本出错：例如从user-profile.css提取类名时，误将user_profile__avatar归入user块

中划线不是“为了好看”，而是避免CSS选择器冲突的关键

BEM靠命名隔离作用域，中划线让块名具备明确词界。没有它，多单词块在复杂项目里极易撞名。比如modalwindow和modalWindow在压缩后都变成.modalwindow，而modal-window天然唯一。

• 真实踩坑场景：两个团队分别开发searchresult和searchResult组件，上线后样式互相覆盖，排查三天才发现命名未统一
• 安全做法：所有块名走CI校验，用正则/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/强制过滤
• 记住：中划线是BEM的语法糖，不是装饰——它让form-submit-button和form-submit-button__icon之间存在不可绕过的语义锚点

以上就是《多单词BEM块名建议使用中划线连接，如`button-submit`或`modal-close`。这种方式清晰、规范，便于维护和理解。》的详细内容，更多关于的资料请关注golang学习网公众号！