BEM中双下划线__是严格定义的元素分隔符，仅用于block__element，连字符-专用于modifier（如--disabled），混用会导致语义混淆、协作混乱和复用性丧失。
为什么BEM里双下划线__不能写成连字符-
因为BEM规范中__是严格定义的修饰符分隔符，不是风格偏好——浏览器不报错，但团队协作时会直接混淆语义。比如button--primary被当成修饰符没问题，但button-primary无法区分这是独立组件还是button的变体。
常见错误现象：header-logo被新人理解为“logo组件”，实际应是header__logo，表示它是header的子元素；而logo单独存在才是可复用组件。
-
__只用于连接块（block）和元素（element），如modal__close、form__input -
--只用于修饰符（modifier），如button--disabled、card--rounded - 绝对避免嵌套层级：不用
header__nav__item，应是nav__item（nav本身是独立块）
如何给React组件名和CSS类名保持同步
React组件名是PascalCase，CSS类名是kebab-case，二者必须映射清晰，否则重构时极易漏改。比如UserInfoCard组件，对应根元素类名必须是user-info-card，而不是user-info或userinfocard。
使用场景：组件抽离、Storybook调试、E2E测试定位元素时，都依赖这个一致性。
立即学习“前端免费学习笔记（深入）”；
- 推荐在组件顶部用
const BLOCK_NAME = 'user-info-card'统一声明，所有子元素基于它拼接：${BLOCK_NAME}__avatar - 不要用
className={styles.avatar}这种CSS Modules简写，丢失BEM语义；需显式写出完整类名 - 如果用
clsx拼接，确保修饰符也走BEM路径：clsx(`${BLOCK_NAME} ${BLOCK_NAME}--loading`)
伪类和状态类该不该进BEM命名
不该。BEM只管结构和可变状态（如--disabled），不处理:hover、:focus这类运行时状态。它们属于样式实现细节，写在CSS里即可，无需暴露到HTML类名中。
容易踩的坑：有人为了“控制hover样式”加--hover类，结果JS强行触发导致可访问性问题（键盘焦点失效）、动画卡顿、与系统高对比度模式冲突。
-
--disabled合法，因为它是明确的业务状态，且需禁用交互、改变视觉、影响表单提交逻辑 -
--hover非法，浏览器原生:hover更轻量、可访问、无需JS干预 - 需要JS响应的交互态（如展开/收起），用
--expanded而非--on-hover
第三方UI库（如Ant Design）能套BEM吗
不能硬套，但可以桥接。Ant Design本身用ant-btn这类前缀，不是BEM结构；强行改成button__icon会破坏样式隔离和升级兼容性。
正确做法是把第三方组件当“原子块”使用，在它外部用BEM组织布局关系。
- 允许：
search-form__submit-btn作为自定义包裹层，内部放<Button type="primary"> - 禁止：覆盖
.ant-btn__icon或重写ant-btn的子元素类名 - 如需深度定制，用CSS-in-JS或CSS Modules封装，不污染全局BEM命名空间
BEM真正的价值不在类名长得像不像，而在所有人看到cart-item__price--discounted时，立刻知道它属于哪个功能模块、什么状态、能否独立复用——这点一旦在第三方组件上强行对齐，反而让边界变模糊。
