BEM中禁止使用.sidebar .card等依赖外部容器的后代选择器，必须转为块自身修饰符（如.card--in-sidebar），因其能表达业务意图、完整声明样式、支持组合与独立开关，且命名需可读可搜。
为什么不能用 .sidebar .card 控制卡片样式
因为这种写法把样式逻辑绑死在 DOM 层级上，一旦 .card 被抽离到弹窗、邮件模板或第三方容器里，样式立刻失效。更隐蔽的问题是：父容器加了 transform 或 will-change，可能意外触发重绘；移动端 WebView 下，后代选择器匹配开销也更高。
真正该做的是让 .card 自己表达上下文——不是“它在哪儿”，而是“它为什么这样”。所以必须转成块自身的修饰符：.card--in-sidebar，且这个类名要完整声明视觉表现（比如 padding、background），不能只写 margin-left: 20px 这种纯位移规则。
- 修饰符命名必须可读、可猜、可搜索：
--in-sidebar比--sidebar-layout明确得多 - 支持组合：
.card--in-sidebar.card--dark是合法且推荐的，不要造--in-sidebar-dark - 若嵌套在 Ant Design 的
.ant-drawer-content里，别写.ant-drawer-content .card，而是在外层加可控命名空间：<div class="myapp-drawer"></div>，再定义.myapp-drawer .card--in-drawer
如何让子元素响应父级状态却不破坏BEM隔离性
父级修饰符（如 .card--hovered）不能通过后代选择器控制子项，比如 .card--hovered .card__title 是非法的。这不是为了教条，而是因为 .card__title 可能被单独复用于 Tooltip 或列表项，此时它就失去了“被 hover 推导”的上下文。
正确做法是：JS 不该只加 .card--hovered，而应同步判断并显式添加 .card__title--hovered 和 .card__body--hovered。子元素的状态类名必须带完整路径，.card__title--hovered ✔️，.card-title--hovered ❌（丢失 block 归属）。
立即学习“前端免费学习笔记（深入）”；
- Sass 嵌套陷阱：
&--hovered { &__title { } }会生成非法类名.card--hovered__title，浏览器根本不认 - 批量响应时优先用属性驱动：
.dropdown[aria-expanded="true"] .dropdown__menu比.dropdown--expanded .dropdown__menu更可靠，因为aria-expanded是原生、可测试、屏幕阅读器友好的状态源 - IE11 不支持
:has()，所以别指望用它反向控制父级——BEM 要求你放弃“自动推导”，改用明确类名或属性组合
多个组件共用相同 BEM 类名时覆盖失效怎么办
BEM 不是作用域机制，只是命名约定。两个模块都写了 .header__title，打包进同一份 CSS 后，后加载的规则必然覆盖先加载的——这不是命名问题，是构建时域没切开。
最直接有效的解法是物理隔离：CSS Modules 会把 .header__title 编译成类似 _header__title_3k9x 的唯一哈希名。如果必须用全局 CSS，则收敛为唯一 block 名：.site-header__title 和 .user-profile-header__title，而不是都叫 .header__title。
- 禁用所有含
*、body、div的全局通配规则，尤其警惕第三方主题包里的.theme-base * { } - Vite/Webpack 若没配对哈希规则，
&生成的.card__header依然裸奔——BEM 写得再规范，工具链没兜底就只是语义更清楚的全局污染 - Tailwind 用户可在
tailwind.config.js中设prefix: 'tw-'，避免和 Bootstrap 的text-lg冲突
怎么安全地覆盖第三方组件库的样式
硬加项目前缀（如 myapp-el-button）是错的：它会破坏 Element Plus 内部的 .el-button.is-disabled 选择器链，也无法响应运行时插入的类（如 el-select__popper）。
正确策略是 wrapper block 隔离：给第三方组件外层加一个 BEM 块，比如 .form-field--date，然后用属性选择器或 :deep() 局部限定作用域：
.form-field--date.el-date-editor { width: 100%; }
.form-field--date:deep(.el-input__inner) { padding: 8px 12px; }- 避免用
!important“赢过”第三方样式——它会让后续调试变成猜谜，且无法解决同权重下的层叠顺序问题 - 禁用全局重置（如
* { box-sizing: border-box; }），改为只作用于你的 block：.my-block { all: unset; }再逐个声明需要的样式 - Vue 单文件组件中，
<style scoped>只加属性选择器，不防同名类在不同组件共存；要用<style module>才能真正隔离
关键点不在“怎么写类名”，而在“谁负责注入类名”和“构建时是否切断作用域”。BEM 是语义协议，不是魔法——它只告诉你该叫什么，不替你管类名从哪来、到哪去。
