BEM禁止使用.block .block__item后代选择器，因其将语义归属退化为DOM结构快照，破坏封装性与可移植性，导致HTML结构调整或Portal渲染时样式失效。
为什么 BEM 中禁止用 .block .block__item 这种后代选择器
因为这等于主动放弃 BEM 的封装前提——.block__item 本应靠类名自身表达归属和作用域，加一层父选择器不仅冗余，还会让样式强依赖 DOM 层级，一动就断。
.block .block__item 会破坏 BEM 的语义契约
BEM 要求每个 __item 必须逻辑上直属于 .block，但这个“属于”是语义归属，不是 DOM 位置。写成后代选择器，就把语义约束退化成了结构快照：
- 一旦 HTML 里插入一个 wrapper（比如加个
<div class="wrapper">），.block .block__item就失效，而.block__item本身仍有效 - 组件被 React Portal 渲染到 body 下时，DOM 层级断开，但语义没变——后代选择器直接失灵，
.block__item类名却依然能工作 - 构建工具（如 css-loader?modules）无法安全作用域化后代选择器，
.block可能被重命名，.block__item却没跟着变，造成匹配失败
实际开发中容易踩的坑
这类写法常出现在“想保险一点”的心理下，结果反而埋雷：
- SCSS 里写
.block { &__item { color: red; } }是安全的，它编译后就是.block__item；但若写成.block { &__item { &__icon { ... } } }，就生成.block__item .block__item__icon，违反单层 Element 原则 - 为了覆盖第三方库样式，硬加
.my-page .ant-btn，结果主应用升级后.ant-btn内部结构微调，你的后代链就断了 - 用
.card .card__title调整标题 margin，后来发现.card__title在弹窗里复用，但弹窗没有.card外层容器，样式丢失
真正该用什么替代方案
当需要限定作用域或处理第三方组件时，优先走隔离而非嵌套：
立即学习“前端免费学习笔记（深入）”；
- 需要限制样式生效范围？用 wrapper block：
.user-dashboard__card-wrapper .card__title，保留空格，不拼接 - 要覆盖 Ant Design 按钮内边距？写
.my-form__submit-btn .ant-btn-padding-horizontal，而不是.my-form .ant-btn - 多个 Block 组合使用（如
search-bar+search-input）？在 JS 层组合，不在 CSS 里用后代选择器绑定
