BEM块名必须用短横线（-）而非连写或驼峰，因它是CSS合法分隔符、工具链正则校验基础、语义词界保障；user-profile✅合规，userprofile❌无词界，userProfile❌CSS非法且破坏扁平命名。
为什么BEM块名必须用短横线（-）而不是连在一起写
因为浏览器和构建工具都把类名当字符串处理，userprofile和user-profile是两个完全不同的类——前者容易和其它命名风格（比如驼峰userProfile）混淆，后者才符合BEM对“语义可读+机器可解析”的双重要求。
常见错误现象：userprofile__avatar被Stylelint报错、VS Code的BEM Helper插件不提示、组件文档里搜不到对应块名。
-
user-profile✅ 能被bem/valid-block-name规则识别，和文件名user-profile.css、React组件名UserProfile形成映射 -
userprofile❌ 不带分隔符，人眼难分辨词界，CI里过不了校验 -
userProfile❌ 驼峰，预处理器（如Sass的&__avatar）无法正确解析块名
单短横线（-）和双短横线（--）不能混用的原因
不是为了“好看”，而是语法角色完全不同：-只负责拼单词，--专用于标记修饰符——这是BEM解析器（包括Stylelint、PostCSS插件、IDE补全）的硬性分界信号。
如果写成button-disabled，工具会把它当成一个新块名，而不是button块的disabled状态；更糟的是，button--primary--loading这种嵌套写法直接非法，BEM不支持修饰符叠加。
立即学习“前端免费学习笔记（深入）”；
- 合法：
button--disabled、button--primary、button--disabled button--primary（两个独立类） - 非法：
button-disabled（被当块）、button--primary--loading（修饰符不可嵌套）、button_disabled（下划线触发校验失败）
为什么不用下划线（_）替代短横线
下划线在URL里显示为低空线，和文字下划线视觉重叠；更重要的是，它和BEM修饰符--长得太像，容易在代码审查或快速扫读时误判——比如user_profile--active，你第一眼反应是块名带下划线，还是修饰符写错了？
构建链路里也踩过坑：Webpack的CSS提取插件曾把_路径误识别为转义字符；Git diff里card_header和card-header并排出现，reviewer直接跳过没细看。
- 推荐：
header-layout.css、form-validation.css（全项目统一用-） - 避免：
header_layout.css、form_validation.css（和类名风格割裂，增加认知负担）
多单词元素名里还能用短横线吗
能，而且必须用。元素名bio-section放在user-profile__bio-section里完全合规——__之后的部分整体是元素名，内部用-连接只是语义分隔，不改变层级。
真正危险的是混用：user-profile__bio_section看起来像“bio”加修饰符_section，但_根本不是BEM认可的分隔符；user-profile__bioSection则违反小写+短横线规则，Sass里&__bioSection编译会失败。
- ✅
user-profile__bio-section、user-profile__avatar-wrapper - ❌
user-profile__bio_section、user-profile__bioSection、user-profile__bioSection--large
stylelint和编辑器插件实时挡住错误写法——一旦漏掉一个userProfile，后面就真有人跟着写cardTitle和modalWindow。 
