userprofile非法，因css不支持驼峰：浏览器将.userprofile解析为类名user加伪类:profile，导致匹配失败；bem工具链依赖小写+连字符正则匹配，驼峰破坏语义切分与自动化流程。
CSS BEM 中用驼峰命名（如 userProfile）会直接导致类名非法、工具链失效、团队协作断裂，不是风格问题，是硬性技术限制。
为什么 userProfile 在 CSS 中根本解析不了
CSS 类选择器不支持大写字母作为标识符的一部分。浏览器解析 .userProfile 时，会尝试将其拆成 .user + 伪类 :Profile（虽然 :Profile 无效），结果既不匹配预期元素，又破坏语义完整性。BEM 要求块名必须是纯小写、无空格、无大小写混用的扁平字符串，userProfile 违反这一底层前提。
VS Code 插件和构建工具会直接罢工
BEM 相关工具（如 Emmet、BEM Helper、postcss-bem-linter）依赖正则或 AST 精确匹配块名模式。它们只认 user-profile 这类连字符分隔的格式：
-
user-profile__avatar→ 可自动补全、可 lint、可生成嵌套结构 -
userProfile__avatar→ 匹配失败，补全不触发，linter 报Invalid block name -
user_profile__avatar→ 下划线被保留为字面量，但多数插件默认忽略下划线块名，同样无法识别
多单词 + 数字/缩写时歧义爆炸
遇到 apiV2Response 或 userId 这类名字，驼峰完全无法区分大小写边界和原始词义：
-
apiV2Response：V2 是 “version 2” 还是单词 “v2”？ -
userId：ID 是缩写，该大写还是小写？userID和userid都有人用，团队内立刻分裂 -
user-profile__api-v2-response：连字符清晰表达三个独立语义单元，无歧义，CSS 合法，工具链友好
BEM 规范强制要求中划线，不是建议
BEM 官方文档与主流实现（Yandex、CSS Tricks、ITCSS）统一规定：块名必须用单个连字符 - 连接单词，禁止驼峰、禁止下划线（下划线仅限修饰符，如 button--disabled）。这不是“可选风格”，而是保障以下三点的底线：
- CSS 语法合法性（避免解析错误）
- 工具链可自动化（补全、lint、生成、重构）
- 跨人协作时命名意图零损耗（
search-form__input--large比searchFormInputLarge更易对齐理解）
真正容易被忽略的是：一旦在某个组件里偷偷用了驼峰，后续所有基于 BEM 的自动化流程都会在这个节点断掉——没人会去查 lint 报错是不是因为一个类名写错了大小写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
