BEM通过block-element-modifier三层结构隔离作用域、避免类名冲突和语义混乱；block为独立可复用组件，element依附block用__连接，modifier用--描述状态且须与block/element并列使用。
为什么BEM能解决类名冲突和语义混乱
因为BEM强制把一个组件拆成block、element、modifier三层结构，天然隔离作用域。比如header是块，header__logo是它的元素，header--dark是它的状态变体——所有类名都带前缀，不会和nav或footer下的logo撞车。
常见错误是只用__不用--，或者把修饰符写成header__logo--big（错：元素不能直接带修饰符，应是header__logo header__logo--big）。
-
block必须是独立、可复用的组件，如button、card，不能是left-sidebar这种带位置描述的 -
element必须依附于block存在，命名用__连接，如card__title，不可嵌套：card__title__icon是非法的 -
modifier只改变外观或行为，不改变结构，用--连接，且要和block或element并列使用，不是子类
BEM在React组件里怎么落地不别扭
React里直接写className="button button--primary button__icon"太啰嗦，容易漏掉block基础类。推荐用clsx或classnames动态拼接：
import clsx from 'clsx';
function Button({ variant, hasIcon }) {
return (
<button className={clsx(
'button',
`button--${variant}`,
hasIcon && 'button__icon'
)}>
Click me
</button>
);
}
注意：不要把BEM逻辑塞进CSS-in-JS（比如Styled Components里写&__icon），会破坏BEM的可预测性；也不要用css-modules自动生成哈希类名来“替代”BEM——那只是隐藏了问题，团队协作时依然无法从类名反推结构。
立即学习“前端免费学习笔记（深入）”；
遇到长名字或深层嵌套怎么办
BEM不允许menu__item__link__icon这种四层命名，说明结构设计错了。此时应该检查是否真需要这么深的嵌套：菜单项里的图标，通常属于menu__item这个element的视觉变体，而不是独立element。
- 优先把深层节点提升为独立
block，比如icon本身就是一个通用block，就用icon icon--small，而非menu__item__icon - 如果必须保留上下文（如图标颜色需随菜单主题变化），用
menu__item-icon（单下划线）作为例外，但要全团队约定并写入规范文档，不能随意滥用 - 名字过长（如
user-profile-card__header-section-title-text）大概率是block粒度太大，拆成user-profile-card+section-header更合理
和Tailwind这类工具类共存时怎么避免混乱
混用BEM和Tailwind不是不行，但得划清边界：BEM管语义结构和组件封装，Tailwind管原子样式。比如<div class="card card--featured"><h2 class="card__title text-xl font-bold">——card和card__title定义组件关系，text-xl只负责字体大小，不参与结构表达。
容易踩的坑是用Tailwind替代BEM修饰符，比如写bg-blue-500代替button--primary。这样会导致样式散落、无法全局替换主题，也丧失了语义（别人看不出这个蓝色代表“主要按钮”，还是“警告背景”）。
真正复杂的地方在于团队对“什么算语义、什么算表现”的判断不一致。建议初期用BEM命名所有容器和关键元素，只允许在明确无业务含义的辅助样式上用Tailwind，比如ml-2、flex这类布局类。
