bem规范强制块名使用中划线：user-profile✅，userprofile❌（css非法），user_profile❌（混淆修饰符）；元素名必须基于完整块名+双下划线，如user-profile__avatar✅；工具链依赖中划线正则校验，确保语义唯一与工程化稳定。
多单词块名必须用中划线，不能用驼峰或下划线
中划线（-）是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之间存在不可绕过的语义锚点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
