bem规定class名禁用单下划线（如user_name）而强制使用双下划线__和双中划线--，因其解析逻辑依赖唯一分隔符来准确识别块、元素与修饰符层级，避免歧义和工具链失效。
为什么BEM里class名不能用下划线连接user_name？
BEM强制用双下划线__分隔块与元素、双中划线--分隔修饰符，是因为解析逻辑依赖这种唯一分隔符。用单下划线user_name会导致name被误判为元素，而实际它可能是块名的一部分——比如form__input--disabled能明确表达层级，form_input_disabled则无法区分哪段是块、哪段是修饰符。
- 浏览器不校验class命名，但团队协作和CSS-in-JS工具（如
clsx）会依赖BEM结构做自动补全或lint - 所有预处理器（Sass/Less）的嵌套规则也按
__和--识别作用域，写错就编译不出预期选择器 - 别图省事把
header__logo--small缩成header-logo-small——后者在查找“所有logo相关样式”时会漏掉，因为没统一前缀
如何给React组件正确绑定BEM class名？
直接拼字符串className="btn btn--primary btn--large"看似简单，但一加状态逻辑就容易出错：条件多了易漏空格、修饰符重复、动态类名顺序混乱。推荐用clsx配合函数封装。
- 每个块写一个独立生成函数，比如
button块对应cnButton()，接收size、variant等参数，内部只返回合法BEM class数组 - 禁止在组件内写
className={`${base} ${size ? base + '--' + size : ''}``}——这种拼接无法静态分析，IDE跳转失效，重构时改名会漏 - 如果用
styled-components，别把BEM当普通class塞进模板字面量里；应先用clsx生成class串，再传给className属性
修饰符--disabled该加在块上还是元素上？
修饰符永远作用于它所修饰的**具体UI单元**，不是“整个组件”。比如card块里有card__header和card__body，若只有header禁用，就该用card__header--disabled，而不是card--disabled再靠CSS降权控制子元素。
- 错误做法：
card--disabled .card__header——破坏BEM“样式隔离”原则，子元素样式受父级修饰符隐式影响，后期想单独启用header就会冲突 - 正确路径：哪个视觉单元状态变了，就在它的class上加对应修饰符；状态逻辑分散到各子组件，而非集中在块顶层
- 注意
--修饰符不可嵌套，card__header--disabled--bold是反模式；应拆成两个独立修饰符，或合并语义为card__header--disabled-bold（仅当该组合有明确设计定义时）
Webpack打包后CSS体积暴增，是不是BEM导致的？
不是BEM本身的问题，而是没配合构建工具做class名压缩。BEM长名在开发期提升可读性，但上线前必须转换。关键在配置css-loader的localIdentName或使用css-minimizer-webpack-plugin的minifySelectors选项。
- 开发环境保留
button__text--hover便于调试，生产环境可压缩为a-b-c，只要保证同一块内不冲突即可 - 切勿手动删BEM前缀来“减体积”——这等于放弃规范，后续维护成本指数级上升
- 如果用了CSS Modules，确保
generateScopedName没把__和--当成特殊字符转义，否则会出现button_123__text_456这类冗余名
真正难的是团队对“什么算一个块”的共识。按钮图标、文字、边框各自要不要拆成独立块？这个边界一旦划错，后面所有修饰符和嵌套都会失焦。得靠设计系统文档定死，而不是靠命名规则兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
