bem规范通过块（block）、元素（element）、修饰符（modifier）的显式命名结构解决css复用性差问题：.card__title绑定到.card上下文，避免层级依赖；禁止松散组合如.card .title，强制使用.user-card__avatar等带双下划线的元素名，并将状态类统一置于块根如.user-card--selected，确保语义清晰、样式隔离、可移植。
你的 CSS 复用性差，根本原因不是写得少，而是类名没绑定到具体组件上——.title、.btn、.icon 这类泛化命名在不同页面里语义漂移，一复制就失效，一覆盖就失控。
为什么 .card .title 不能直接复用到新页面
浏览器匹配选择器是从右往左的，.card .title 实际上在找「所有带 title 类且父级有 card」的元素。一旦新页面结构是 <section class="product-card">...<h3 class="title">...</h3></section>，样式就断了——因为 .title 不再被 .card 包裹。
- 更隐蔽的问题是优先级：外层
font-size: 0.875rem会通过继承影响.title，但你根本没在规则里声明font-size，所以改起来像捉迷藏 - 设计稿里两个
icon，一个在 header，一个在 footer，视觉完全不同，但共用.icon类，结果改一个，另一个也跟着变 - BEM 要求的是显式归属：
.card__title永远只响应.card下的结构，不靠 DOM 层级“猜”关系
怎么把现有 .user-card 改造成真正可复用的 BEM 块
别重写整套样式，从高频模块切口入手，重点改三处：
- 根元素必须带块名：
<div class="user-card">，不能只写 <code><div class="user-card__header"> 就完事——没有块根，元素名就失去上下文 <li>子元素名强制加双下划线：<code>.user-card__avatar、.user-card__name，禁止出现.user-card .avatar这种松散组合，否则挪到新容器里立刻失效 - 状态类统一挂块根上：
.user-card--selected，而不是.user-card__name--selected——Modifier 描述的是整个组件的状态，不是某个子元素的“局部开关” - 正确做法是：最外层
<ul class="menu"></ul>，每个<li>都加menu__item，内部<ul></ul>加menu__sublist——Element 不嵌套 Element，只属于 Block - 类名长度不是问题，
.checkout-form__submit-button比缩写成.c-f__sb更安全，IDE 搜索和团队协作都稳 - 真要缩短，砍掉冗余词（如
container、wrapper），而不是压缩块名本身；.search-input就比.header-search-input更通用 - 用
styled-components时，仍建议按 BEM 思维组织 class 名：className={`${prefix}__header`}，而不是全靠 JS 动态拼字符串 - 用 Tailwind 时，别为了“省事”堆出
flex items-center p-4 bg-gray-50 text-sm这种原子组合——它复用时无法一眼识别这是个「卡片头部」，后续加 hover 或主题切换就抓瞎 - 最常翻车的是覆盖逻辑混乱：一边写
.button--primary，一边又用text-blue-600 font-bold直接覆盖，结果维护时两边都要查，还容易漏掉伪类（比如忘了:focus-visible）
嵌套四层以上时，BEM 怎么避免类名爆炸
DOM 可以深，但 BEM 的语义层级不能跟着深。比如一个三级菜单：<ul><li><ul><li><ul><li>...</li></ul></li></ul></li></ul>，别写成 .menu__item__subitem__subsubitem。
BEM 和 CSS-in-JS / Tailwind 混用时最容易漏掉什么
不冲突，但混用时边界容易模糊：
复杂点在于：BEM 管得住命名，管不住全局样式污染、CSS 优先级乱斗、伪类遗漏这些底层问题。类名再规范，如果没配好 :focus-visible 或滥用 !important，照样出 bug。
