BEM 通过命名强制隔离作用域，解决嵌套深导致的样式耦合与维护爆炸问题；其核心是 Block 独立、Element 无嵌套、Modifier 依附于 Block，而非父级权重或 DOM 结构。
为什么嵌套层级深了，CSS就失控了
不是选择器写得不够长，是维护成本爆炸了。你改一个 .sidebar .content .item:hover，结果首页、弹窗、后台列表全跟着变；别人加个新组件，顺手套了三层 div，你的样式立刻失效——这不是你漏写了 :not()，是结构和样式耦合太紧。
根本问题不在“能不能选中”，而在“改一处，牵全身”+“谁都能覆盖你”。BEM 不是命名规范教条，它是用命名强制隔离作用域，把“靠父级压权重”变成“靠名字定归属”。
BEM 的 class 名到底怎么写才不翻车
三个字母不是摆设：B（Block）是独立功能单元，E（Element）是它内部的组成部分，M（Modifier）是状态变体。关键在“独立”和“无依赖”：
-
card是 Block，card__title和card__footer是 Element，它们必须能脱离父级单独存在 - 禁止出现
card__title--dark这种写法——--dark是 Modifier，但它是针对card的，不是title的，应写作card--dark card__title - Element 不能嵌套：没有
card__title__icon，只有card__title-icon（这是title的子元素，但属于card的范畴） - 遇到条件渲染或动态结构（比如 React 中
{items.map(...)}），别硬套list__item，直接用list-item—— BEM 只管语义，不管 DOM 深度
和 CSS-in-JS、Tailwind 混用时，BEM 还剩多少价值
不是非此即彼。BEM 在以下场景依然不可替代：
立即学习“前端免费学习笔记（深入）”；
- 需要 SSR 或静态 HTML 输出时（如邮件模板、CMS 页面），CSS-in-JS 的运行时注入不生效，BEM class 是唯一可靠锚点
- Tailwind 做快速原型很爽，但当项目超过 5 个页面、有 3 个以上设计师协同时，
text-gray-700 p-4 rounded-lg border border-gray-200会迅速退化成“魔法字符串”，而btn btn--primary能被搜索、被复用、被文档化 - 第三方组件库（如 Ant Design）的样式穿透问题，用 BEM 命名封装一层 wrapper，比疯狂写
:deep(.ant-btn)更可控
注意：BEM class 名本身不解决 scoped 样式，它只是让 scope 可读、可推断。真要隔离，还得配合 scoped 属性或 CSS Modules。
实际项目里最容易被忽略的 BEM 细节
不是命名规则记不住，是边界模糊时下意识妥协：
- 图标、按钮、输入框这类“原子组件”，该用 BEM 还是直接用工具类？答案：只要它在多个页面复用且有视觉一致性要求，就必须是 Block（
icon、button），哪怕只有一层 DOM - 媒体查询里的 Modifier 写法：不要写
card--mobile，而要用card card--mobile，否则响应式切换时 JS 很难干净地增删 class - 伪类和伪元素不进 BEM：
card__title:hover合法，card__title::before也合法，但不要起名card__title--hover—— 它不是状态，是表现逻辑
BEM 真正难的不是写对名字，是每次加新 DOM 节点前，先问一句：这个节点有没有独立语义？要不要被其他模块复用？如果答案是否定的，它就不该有 BEM class。
