多单词块名必须用中划线（-），是BEM硬性规范：user-profile✅合法，userProfile❌因CSS不支持驼峰致解析失败，user_profile❌因下划线专用于修饰符而引发语义混淆与工具链误判。
多单词块名必须用单连字符（-），不是可选项，是BEM规范的硬性边界。用userProfile或user_profile会直接导致CSS解析失败、工具链报错、团队协作断层。
为什么user-profile合法而userProfile非法
CSS类名不支持驼峰写法：.userProfile会被浏览器当作类名user加伪类:Profile处理，语法上就无效。BEM依赖纯文本匹配做语义切分，驼峰破坏了词界识别基础——所有构建工具（如stylelint-config-bem-stylint）的正则^[a-z][a-z0-9]*(-[a-z0-9]+)*$明确拒绝大写字母。
-
user-profile→ 可被正则完整捕获为一个块名 -
userProfile→ 正则在user处截断，后续Profile丢失或误判为伪类 - IDE补全、组件提取脚本、PostCSS BEM插件全部失效
为什么不用下划线user_profile
下划线在BEM中已被预留给修饰符语义，比如button_disabled表示button处于禁用状态。若块名也用下划线，工具无法区分user_profile__avatar里的user_profile是块还是user块 + _profile修饰符。
-
user_profile__avatar→ 工具可能错误归入user块，_profile被当修饰符 -
user-profile__avatar→ 明确唯一块名，__前的部分整体作为命名空间 - 团队成员看到
_会本能联想“这是某种状态”，造成理解偏差
user-profile__bio-section里bio-section能用连字符吗
可以，且推荐。元素名内部的连字符仅作语义分隔，不改变层级关系。BEM只要求块名本身合规，元素名只要不以__或--开头，中间用-分隔多词完全没问题。
-
user-profile__bio-section✅ 合法：完整块名user-profile+__+ 元素名bio-section -
user-profile__bioSection❌ 驼峰，违反元素名小写+连字符规则 -
user-profile__bio_section❌ 下划线混入元素名，易与修饰符混淆（如bio_section--truncated）
构建工具和CI流程如何验证这块
别只靠人眼检查。把校验塞进开发链路里，否则规范形同虚设。
- 在
.stylelintrc中启用bem/valid-block-name规则，它会直接拦截userProfile类名 - VS Code安装
BEM Helper插件，输入user后按Tab，只会提示user-profile__而非userProfile__ - CI阶段跑
npx stylelint "**/*.css"，失败即阻断合并
真正难的不是记住规则，而是让工具替你守住边界——一旦放行一个user_profile，后面就会有十个modalWindow和cardTitle跟着进来。
