Angular默认ViewEncapsulation.Emulated仅防样式外泄、不阻外部穿透，故BEM类名.card__title仍可能被全局样式覆盖；需结合属性标记、选择器权重及合理封装策略协同工作。
Angular 默认的 ViewEncapsulation.Emulated 和 BEM 不是互斥方案，而是天然互补：前者管“作用域边界”，后者管“类名语义归属”。强行在 ShadowDom 模式下硬套 BEM 类名、或在 None 模式下只靠 BEM 防污染，都会失效。
为什么 Angular 组件里写 .card__title 还会被全局样式覆盖
因为 ViewEncapsulation.Emulated 只阻止组件样式“漏出去”，不阻止外部样式“打进来”。哪怕你写了严格的 card__title，只要页面某处有 div.card__title { color: red; } 或更宽泛的 [class*="title"]，它照样生效。
- 排查路径：打开 DevTools → 选中元素 → 看 Styles 面板里哪些规则带
[_ngcontent-xxx]（这是 Emulated 注入的），哪些没有（就是外部穿透进来的） - 真正起作用的是选择器权重 + 属性标记组合，不是类名本身。BEM 类名只是让“哪个规则该管谁”更可读、可维护
- 如果发现大量穿透，优先检查是否误设了
encapsulation: ViewEncapsulation.None，或第三方库的全局 CSS 被直接 import 到styles.css
如何让 BEM 类名和 ViewEncapsulation.Emulated 协同工作
BEM 的 class 名要真正生效，得和 Angular 的属性标记对齐——否则编译后选择器根本匹配不到元素。
- 必须用完整类名：写
card__title，不能简写成__title；浏览器不认这种语法，Angular 编译时也不会自动补前缀 - Sass/Less 中禁止用嵌套写法
.card { &__title { ... } }以外的结构；& .card__title会生成带空格的选择器，破坏 BEM 语义且无法命中[_ngcontent-xxx] - HTML 模板中每个元素只挂一个 block 相关类：用
card--featured，别再额外加card；重复类名不仅冗余，还可能干扰ngClass动态逻辑 - 动态类名必须走
ngClass或class绑定，避免字符串拼接：[class]="'card__body ' + (isCollapsed ? 'card__body--collapsed' : '')"比手动插className更安全
遇到第三方组件库（如 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 .my-button__inner .ant-btn（仅限 Emulated 模式） - 不要试图把
nz-button的 modifier 映射成my-button--primary；modifier 应描述 wrapper 自身状态（如my-button--loading），而非透传底层库语义 - CI 流程中加
stylelint规则，禁止出现.ant-、.ng-zorro-等第三方类名出现在自定义 CSS 文件里
什么时候该放弃手写 BEM 类名
不是所有场景都适合显式写 block__element。Angular 的组件结构本身已是天然 block，过度强调 BEM 反而增加冗余。
- 纯布局容器（如
<div class="grid-col-3">）用工具类更合理，BEM 强制命名反而模糊意图 <li>服务端渲染（SSR）项目中，ShadowDom 模式不可用，<code>Emulated是唯一选择，此时 BEM 类名就是实际作用域锚点，不能省 - 使用
@angular/material且开启cssCustomProperties: true时，优先用 CSS 自定义属性控制主题，BEM 只保留模块锚点（如product-card），内部用 Tailwind 工具类 - 最易被忽略的一点：BEM 类名一旦出现在
innerHTML或服务端返回的 HTML 片段中，就脱离了 Angular 编译流程，[_ngcontent-xxx]标记不会自动注入——这类内容必须由组件主动包裹并添加对应类名
