多单词块名必须用中划线（-），因CSS不支持驼峰、下划线仅用于修饰符，且中划线是BEM规范硬性要求，确保工具链识别、词界清晰与团队协作一致。
多单词块名必须用中划线（-），不是风格选择，是BEM规范硬性要求；用userProfile或user_profile会直接导致CSS非法、工具链报错、团队协作断裂。
为什么user-profile合法而userProfile不行
CSS类名不支持驼峰写法：.userProfile在解析时会被浏览器当作类名user + 伪类:Profile（虽然无效，但破坏语义），且违反BEM“扁平命名”原则。中划线-是唯一被CSS原生支持、工具链正则广泛匹配的分隔符。
-
user-profile✅ 匹配正则^[a-z][a-z0-9]*(-[a-z0-9]+)*$，被PostCSS BEM插件、stylelint、VS Code Emmet等全部识别 -
userProfile❌ 触发 lint 报错：Expected block name to match pattern "^[a-z][a-z0-9]*(-[a-z0-9]+)*$" -
user_profile❌ 下划线在BEM中专用于修饰符（如button_disabled），混用会模糊Block与Modifier边界
__连接元素时，块名中的-必须完整保留
块名一旦含中划线，所有后续__连接都必须基于完整块名展开，不能截断、缩写或重切分。
- 正确：
user-profile__avatar、user-profile__bio-section（bio-section是元素内部语义分隔，不影响层级） - 错误：
user__avatar（丢失-profile，变成新块user） - 错误：
user-profile-avatar（漏掉__，被识别为独立块名而非元素）
中划线影响构建工具和IDE行为
现代CSS工程化工具默认依赖中划线识别块名边界，非标准写法会导致自动补全失效、组件提取出错、lint拦截失败。
立即学习“前端免费学习笔记（深入）”；
- VS Code BEM Helper插件无法为
user_profile提供__补全 - 从
user-profile.css提取类名时，user_profile__avatar会被误归入user块 - Webpack CSS模块化中，非标准块名可能增加哈希冲突概率
真正容易被忽略的是：中划线不是为了“好看”或“可读性加分”，而是让user-profile和usermodal在压缩后依然保持词界清晰——没有它，多单词块在大型项目里极易因命名碰撞引发样式覆盖，而这种问题往往要到上线后才暴露。
