BEM 类名必须在模板中静态声明，Block 和 Element 类名不可用 HostBinding 拼接；HostBinding 仅用于动态 Modifier 类，多个状态应统一用 [ngClass] 管理；组件目录、文件名、导出名与类名须严格一致。
模板里写死 Block 和 Element 类名，别交给 HostBinding
HostBinding 不能替代 HTML 中的 class 声明，尤其不能用来拼接 card 或 card__title 这类语义核心类名。BEM 要求每个元素只挂一个 Block 类（如 card），且所有 Element 必须显式归属该 Block。一旦用 @HostBinding('class') = 'card card__title'，就等于把两个层级的语义塞进同一处，后续加 card__body 时结构断裂、调试困难。
正确做法是：模板中直接写 class="card" 和 class="card__title"，让 BEM 层级一目了然；HostBinding 只负责动态状态类，比如 card--featured 或 card--collapsed。
- Block 名（
card）和 Element 名（card__body）必须在模板中静态声明 - Modifier 类（
card--loading）才适合用@HostBinding('class.card--loading')控制 - 禁止在 HostBinding 中返回字符串拼接结果，例如
return this.blockClass + '--' + this.modifier
多个 Modifier 共存时，用 [ngClass] 替代多个 @HostBinding
当组件需要同时响应 isDisabled、isLoading、isFeatured 等多个布尔状态时，为每个都写一个 @HostBinding 不仅冗长，还会导致 class 列表顺序不可控——CSS 规则权重可能因顺序变化而失效。
更实际的做法是统一收口到模板中的 [ngClass]，用对象语法集中管理：
立即学习“前端免费学习笔记（深入）”；
<div class="card" [ngClass]="{
'card--disabled': isDisabled,
'card--loading': isLoading,
'card--featured': isFeatured
}">
- 避免混用
[ngClass]和@HostBinding('class.xxx')，Angular 14+ 虽修复了部分清除问题，但 class 合并顺序仍不保证 - 如果 Modifier 逻辑复杂（如依赖计算属性或异步状态），可封装为 getter 并绑定到
[ngClass]的值上 - 不要用
[class.card--xxx]="flag"单独控制多个 Modifier，它本质是单点绑定，不适合组合场景
BEM 类名必须与组件目录、文件名、导出名完全一致
Angular 组件的物理边界（目录结构）和 BEM 的语义边界（类名）必须对齐。比如 /components/button/ 目录下，button.component.ts 导出的组件名必须是 Button，其模板中所有 BEM 类名只能以 button 开头，且不能出现 btn、ui-button 或 Button__icon（大小写、缩写、前缀都不行）。
- 目录名
button→ CSS 类名.button→ 组件导出名Button→ 模板中只用class="button"和class="button__icon" - 禁止将
button__icon抽成独立组件目录，它不是 Block，只是 button 的一部分 - SCSS 中所有嵌套必须基于
&__或&--，禁用& > span或&.active，否则 stylelint 会拦截
ViewEncapsulation.Emulated 下样式被覆盖？先查这三点
即使 BEM 类名写对、HostBinding 用对，样式仍可能被外部穿透或失效。这不是 Angular bug，而是封装机制被绕过：
- 检查是否误设
encapsulation: ViewEncapsulation.None—— 它会让所有类名全局暴露，彻底失去隔离 - 确认
angular.json中stylePreprocessorOptions.includePaths是否包含全局 SCSS 路径，否则@import '_base.scss'可能失败，基础样式未注入 - 排查是否有跨块选择器残留，例如
.card .button，BEM 要求必须改用card__button类名驱动
最常被忽略的是物理边界：BEM 文档不会告诉你 button__text 必须是 button 的直接子节点，但 Angular 模板里若写成 <button><span><span class="button__text"></span></span></button>，语义就已越界。
