BEM中user_profile会被误判为修饰符，因解析器仅识别__和--为层级分隔符，单下划线导致语义链断裂；且下划线在工具链中易引发匹配失败、补全失效及构建问题。
为什么BEM里user_profile会被工具误判为修饰符
BEM解析器靠__和--作为唯一分隔符识别层级，一旦块名里混入单下划线，整个语义链就断了。user_profile__avatar中，解析器会优先尝试切分user（块） + _profile（修饰符），再接__avatar——结果_profile被当成user块的--profile变体，而user_profile本意是完整块名反而消失。
下划线在CSS里本身就有历史歧义
早期CSS hack用_property让IE6/7独占样式，主流浏览器会忽略带前导下划线的声明。虽然现在不常用，但校验工具（如Stylelint）仍默认标记含_的类名为可疑项。更实际的问题是：user_name在HTML里合法，但在JS中className操作、Sass变量插值、PostCSS插件匹配时，容易和JS命名习惯冲突，导致字符串拼接出错或正则误匹配。
button_disabled为什么比button--disabled更难维护
- IDE无法跳转：VS Code的BEM补全、类名导航依赖
--精确锚点，button_disabled会被当作普通字符串忽略 - 无法批量筛选：想查所有禁用态按钮？
[class*="--disabled"]能命中button--disabled和form__submit--disabled，但[class*="_disabled"]会误抓user_disabled_role这类无关类名 - 构建工具失效：PostCSS BEM插件、Webpack CSS提取逻辑都硬编码识别
__/--，遇到_直接跳过，修饰符样式可能根本没打进最终CSS
多单词元素名该用什么连接符
元素名内部多词（如“提交按钮”）必须用短横线-，不是下划线也不是驼峰：form__submit-button✅，form__submitButton❌，form__submit_button❌。原因很实在：短横线在HTML、CSS、JS中都是安全字符，且不会和BEM主分隔符__、--混淆；而submit_button会被解析器当作一个整体元素名，失去“submit”和“button”的语义可读性，也妨碍未来按button关键词全局检索所有按钮类。
真正卡住人的不是写错一个下划线，而是它让机器没法理解你的意图——BEM不是给人看的命名风格，是给工具链吃的结构协议。
立即学习“前端免费学习笔记（深入）”；
