BEM 能让 CSS 更易复用，因其通过「块__元素--状态」命名强制绑定样式与结构，明确依赖关系，避免全局冲突；补 BEM 应渐进式改造高频模块，严守命名规范；它不与 CSS-in-JS 或 Tailwind 冲突，但需统一风格避免混用。
为什么 BEM 能让 CSS 更容易复用
因为传统命名（比如 .header、.btn）没上下文，一复制到新页面就冲突或失效；BEM 强制把「组件名 + 角色 + 状态」塞进类名里，让样式天然绑定结构，挪到哪都认得清自己该管谁。
关键不是加不加双下划线，而是靠命名暴露依赖关系：一个 .card__title 明确表示“我只属于 .card，不 standalone 存在”，改它不用怕误伤别处。
怎么给现有项目补 BEM 不翻车
别重写全部 CSS，优先从高频复用的模块开始，比如弹窗、表单控件、卡片列表。补的时候注意三点：
- 组件根元素必须带
BEM块名（如.modal），不能只写修饰符或元素 - 子元素名必须以块名为前缀 +
__（如.modal__close），禁止出现.modal .close这种松散组合 - 状态类统一用
--开头（如.modal--loading），且只作用于块根，不挂在子元素上
示例：旧写法 .user-card .name → 新写法 .user-card__name；旧 .active → 新 .user-card--selected。
立即学习“前端免费学习笔记（深入）”；
BEM 和 CSS-in-JS 或 Tailwind 冲突吗
不冲突，但目标不同：BEM 解决的是「手写 CSS 的命名契约」，而 CSS-in-JS 本质是运行时生成样式，Tailwind 是原子类组合。如果你用 styled-components，仍建议在组件内按 BEM 思维组织 class 名（如 className={`${prefix}__header`}）；用 Tailwind 则不必套 BEM，但要注意原子类堆叠后语义模糊的问题——比如 flex items-center p-4 bg-gray-50 复用时很难一眼看出这是个「卡片头部」。
真正容易踩的坑是混用：一边写 .button--primary，一边又用 text-blue-600 font-bold 覆盖它，结果维护时两边都要查。
嵌套层级深了 BEM 类名太长怎么办
长度不是问题，可读性才是。与其缩写成 .c-b__t，不如接受 .checkout-form__submit-button —— IDE 自动补全和搜索都更稳。真要缩短，优先砍掉冗余词（如 container、wrapper），而不是压缩块名本身。
另外，BEM 不禁止嵌套，但禁止跨块通信：.card__content .button 是错的，必须写成 .card__action-button；否则复用时只要 .button 样式一变，所有卡片都中招。
复杂点在于：BEM 治标不治本，它管不住全局样式污染、CSS 优先级乱斗、伪类状态遗漏这些底层问题。命名再规范，如果没配好 :focus-visible 或忘了 !important 的代价，照样出 bug。
