Angular中.card__title被全局样式覆盖，因ViewEncapsulation.Emulated仅防样式外泄、不阻外部穿透；真正生效的是选择器权重与属性标记组合，BEM类名仅提升可读性与可维护性。
Angular里写.card__title为什么还是被全局样式覆盖
因为 ViewEncapsulation.Emulated 只阻止组件样式“漏出去”，不阻止外部样式“打进来”。哪怕你严格按 BEM 写了 .card__title，只要某处有 div.card__title { color: red; } 或更宽泛的 [class*="title"]，它照样生效。
排查方法：打开 DevTools → 选中元素 → 看 Styles 面板里哪些规则带 [_ngcontent-xxx]（这是 Emulated 注入的），哪些没有（就是穿透进来的）。
真正起作用的是选择器权重 + Angular 属性标记组合，不是类名本身。BEM 类名只是让“哪个规则该管谁”更可读、可维护。
SCSS中怎么安全写BEM嵌套
Sass/Less 中只允许用 &__title 这种相对语法，其他嵌套结构会破坏 BEM 语义：
立即学习“前端免费学习笔记（深入）”；
-
.card { &__title { ... } }✅ 编译后是.card__title[_ngcontent-xxx]，能命中属性标记 -
.card { .card__title { ... } }❌ 编译后是.card .card__title[_ngcontent-xxx]，带空格的选择器无法匹配直接子元素，且权重升高易冲突 - 禁止用
&__title以外的写法，比如& .card__title或.card__title单独声明——前者生成冗余空格，后者脱离块上下文
动态类名必须走 ngClass，别拼字符串
手动拼接 class 字符串容易出错，且绕过 Angular 的 class 绑定机制：
- ❌ 错误写法：
[class]="'card__body ' + (isCollapsed ? 'card__body--collapsed' : '')" - ✅ 正确写法：
[ngClass]="{ 'card__body': true, 'card__body--collapsed': isCollapsed }" - 更推荐对象字面量或数组形式，避免三元嵌套：
[ngClass]="['card__body', isCollapsed ? 'card__body--collapsed' : '']" - 所有动态类名都应通过
ngClass或[class.xxx]控制，否则 Angular 不会参与 diff，也无法触发属性标记匹配
第三方组件（如 NG-ZORRO）怎么套BEM
直接覆盖 .ant-btn 类等于放弃升级能力，也违背 BEM “归属明确”原则。Wrapper 封装不是妥协，是必要隔离层：
- 用外层 BEM block 包裹：
<div class="my-button"><nz-button class="my-button__inner">提交</nz-button></div> - 只对
.my-button和.my-button__inner写样式，禁用所有!important - 若需调整内部结构，用
:host ::ng-deep .ant-btn（仅限必要场景），但优先考虑是否可通过nzSize、nzType等 API 控制 - 注意
::ng-deep已废弃，生产环境建议用:host /deep/或迁移到 CSS 自定义属性方案
BEM 在 Angular 里不是靠类名自动生效的，它依赖你主动对齐属性标记、控制选择器结构、约束动态类注入方式——稍一松懈，就退回“全局污染”状态。
