bem 是通过命名强制解耦样式与 dom 结构的协作规范。它用 block-element-modifier 三层语义类名替代深层后代选择器，避免结构变动导致样式失效，提升可维护性、复用性与工程健壮性。
深层嵌套的 CSS 选择器（比如 .page .section .content .card .title）不是写不出来的技术问题，而是改一次样式就崩三处的协作灾难。BEM 不是用来“更规范地写 class”的，它是用命名强制切断 DOM 层级对样式的隐式绑定。
为什么后代选择器超过 4 层就该停手
浏览器匹配 CSS 是从右往左回溯的，.a .b .c .d .e 意味着引擎要先找到所有 .e，再逐层向上确认父级是否符合——结构稍一变动，整个选择器就失效。更麻烦的是，这种写法把样式逻辑和 DOM 结构绑死，别人加个 wrapper、抽离个组件，你的样式就掉链子。
- 常见错误现象：
style.css:89里写了.form .group .field .label，结果表单被封装进 React 的FieldSet组件后，.group节点没了，所有 label 样式集体消失 - 真实场景：后台权限菜单、多级弹窗、动态表单字段组——这些结构天然嵌套深，但样式不该跟着“套娃”
- 性能影响：在频繁重绘或 SSR 场景下，这类选择器会拖慢首屏渲染；IE11 虽已淘汰，但部分政企系统仍需兼容，它的选择器引擎对深度嵌套更敏感
怎么把嵌套结构转成 BEM 类名
关键不是删 HTML 标签，而是把视觉/功能层级映射为语义层级。一个 <div><div><div><h3></h3></div></div></div> 可以保持原样，但 class 要明确归属：
- Block 名必须独立可识别，比如
user-card、search-form，禁用top-nav或red-button这类带位置或颜色的描述词 - Element 用双下划线连接，只表达角色：
user-card__avatar、search-form__submit，不体现它在 DOM 里是否嵌在user-card__header里 - Modifier 用双中划线，纯状态标识：
user-card--compact、search-form--disabled，禁止写成user-card__avatar--large（那是user-card的状态，不是 avatar 自己的状态） - HTML 中每个 Element 必须显式带上 Block 的 class：
<div class="user-card"><img class="user-card__avatar"></div>，不能只写class="user-card__avatar"，否则 JS 查询时容易漏节点
Sass 嵌套写法如何不破坏 BEM 原则
Sass 的嵌套语法天生容易产出违反 BEM 的选择器，比如 .card { .title { ... } } 编译出来是 .card .title，这不是 BEM —— BEM 要求所有样式都锚定在单一 class 上。
- 只允许用
&__element和&--modifier这种拼接语法，禁用普通子选择器嵌套 - 伪类和媒体查询要用
@at-root提出去，避免生成.btn:hover .btn__icon这类非 BEM 结构 - 状态切换必须靠 JS 手动增删 class，比如
btn--hover，而不是依赖.btn:hover—— 后者无法响应键盘焦点、无法做动画控制、也无法被测试覆盖 - 如果项目已用 Tailwind，BEM class 只管区块边界（如
product-list），内部用text-sm p-2 rounded控制表现，二者分层协作，不互斥
BEM 最容易被忽略的工程细节
不是记不住 __ 和 --，而是在边界模糊时妥协：比如图标、按钮这类原子组件，该用 BEM 还是直接上工具类？答案很明确——只要它在多个页面复用且有视觉一致性要求，就必须是 Block（icon、button），哪怕只有一层 DOM。
- 第三方组件库（如 Ant Design）的样式穿透问题，别硬写
:deep(.ant-btn)，而是用 BEM 封装一层 wrapper：<div class="my-search-form"><aselect></aselect></div>，然后只对.my-search-form做定制 - 构建时用
postcss-bem-linter校验 CSS 写法，但它不会检查 HTML 是否真写了对应 class，得配合自动化测试抓漏 - 变量定义要对齐 BEM 层级：CSS 自定义属性
--button-bg-color定义在buttonBlock 上，button__icon直接复用，不另起一套--button-icon-bg-color
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
