BEM中禁止使用依赖外部容器的后代选择器（如.sidebar .card），必须转为块自身修饰符（如--in-sidebar）；修饰符需表达业务意图、完整声明样式、支持组合与独立开关，并采用可读命名。
直接说结论：BEM 中不该存在“依赖外部容器的样式”，所谓“适配”必须转译为块自身的修饰符（--with-sidebar、--in-modal），而不是靠 .sidebar .card 这类后代选择器实现。
为什么 .sidebar .card 是危险信号
这类写法表面省事，实则埋下三颗雷：
- 一旦
.card被复制到非.sidebar场景（比如弹窗或邮件模板），样式立即失效 -
.sidebar自身加了transform或will-change，可能意外触发.card的重绘/重排 - 移动端 WebView 下，后代选择器性能更差，尤其在滚动中频繁匹配时
--in-sidebar 修饰符该怎么写才不翻车
关键不是加个类名，而是这个修饰符是否真正表达业务意图、能否独立开关：
- 禁止写
.card--in-sidebar { margin-left: 20px; }—— 这是纯表现，无法预测用途，也无法在其他容器复用 - 应写
.card--in-sidebar { padding: 1rem; background: #f8f9fa; }，且该样式只服务于“侧边栏内卡片需呼吸感+浅灰底”的设计约定 - 所有属性必须完整声明，不能依赖继承或 cascade；删掉
--in-sidebar，就该完全回退到默认态 - 若侧边栏有深色模式，不要新增
--in-sidebar-dark，而应组合使用：.card--in-sidebar.card--dark
当容器本身是第三方组件时怎么办
比如把 .card 塞进 Ant Design 的 .ant-drawer-content 里，又不想改它的 DOM 结构：
- 别在 CSS 里写
.ant-drawer-content .card，这等于向第三方库投降 - 给外层容器手动加一个 BEM 命名空间：
<div class="myapp-drawer">...</div> - 然后定义
.myapp-drawer .card--in-drawer，把适配逻辑收束在你可控的命名空间下 - 如果 Drawer 内容动态加载，JS 注入时同步加上
.card--in-drawer类，而非靠 CSS 推导
最易被忽略的一点：修饰符命名必须可读、可猜、可搜索。写 --in-drawer 比 --drawer-layout 更好，因为“in”明确表达了位置关系；而“layout”是抽象词，下次看到 --modal-layout，没人能确定它是指宽度、z-index 还是阴影强度。
