css选择器不支持驼峰命名，.userprofile会被浏览器误解析为.user和伪类:profile而静默失效；bem工具链依赖小写+短横线正则，驼峰导致补全、lint、嵌套等功能全部失效。
CSS 选择器根本不支持驼峰命名，写 userProfile 就等于写错类名，浏览器会解析失败。
为什么 userProfile 在 CSS 中根本匹配不到元素
CSS 类选择器要求标识符必须是纯小写、无空格、无大写字母的字符串。浏览器遇到 .userProfile 时，会尝试将其拆成 .user + 伪类 :Profile（虽然 :Profile 并不存在），结果既不匹配预期元素，也不报错——只是静默失效。
-
user-profile✅ 是合法 CSS 类名，能被所有浏览器、构建工具、IDE 正确识别 -
userProfile❌ 不是合法标识符，document.querySelector('.userProfile')返回null -
user_profile❌ 下划线虽合法，但破坏 BEM 工具链正则匹配（如stylelint-selector-bem-pattern默认不认下划线）
驼峰会让 BEM 工具链集体“罢工”
BEM 相关工具（Stylelint、PostCSS 插件、VS Code 的 BEM Helper、Emmet）全部依赖小写 + 单短横线的正则模式来识别块名。一旦用驼峰，就失去自动补全、lint 校验、嵌套生成等能力。
-
user-profile__avatar→ 补全触发、linter 通过、Sass 中&__avatar正常展开 -
userProfile__avatar→ 补全不出现、linter 报Invalid block name、&__avatar编译出错 -
apiV2Response这类名字更危险：V2 是 “version 2” 还是单词 “v2”？ID 是缩写还是变量？人眼都难分辨，机器更没法切分
修饰符和元素的分隔符会彻底失效
BEM 解析器靠 -- 和 __ 的固定位置判断语义层级。驼峰混入后，正则无法准确提取块名，导致修饰符误判、元素丢失上下文。
-
button--primary✅ 被识别为button块的primary状态 -
buttonPrimary❌ 被当成一个全新 Block，脱离button上下文，buttonPrimary__icon无法和button共享样式逻辑 -
modal--fade-scale-in✅ 清晰表达三个语义单元；modalFadeScaleIn❌ 无法被任何 BEM 插件识别为状态类
真正容易被忽略的是：一个驼峰类名写错，不会立刻报错，但后续所有基于 BEM 的自动化流程都会在这个节点断掉——没人会在 CI 报错里翻半天，只为了查一个类名是不是大小写写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
