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" isdisabled isloading isfeatured>
<ul>
<li>避免混用 <code>[ngClass]</code> 和 <code>@HostBinding('class.xxx')</code>，Angular 14+ 虽修复了部分清除问题，但 class 合并顺序仍不保证</li>
<li>如果 Modifier 逻辑复杂（如依赖计算属性或异步状态），可封装为 getter 并绑定到 <code>[ngClass]</code> 的值上</li>
<li>不要用 <code>[class.card--xxx]="flag"</code> 单独控制多个 Modifier，它本质是单点绑定，不适合组合场景</li>
</ul>
<h3>BEM 类名必须与组件目录、文件名、导出名完全一致</h3>
<p>Angular 组件的物理边界（目录结构）和 BEM 的语义边界（类名）必须对齐。比如 <code>/components/button/</code> 目录下，<code>button.component.ts</code> 导出的组件名必须是 <code>Button</code>，其模板中所有 BEM 类名只能以 <code>button</code> 开头，且不能出现 <code>btn</code>、<code>ui-button</code> 或 <code>Button__icon</code>（大小写、缩写、前缀都不行）。</p>
<ul>
<li>目录名 <code>button</code> → CSS 类名 <code>.button</code> → 组件导出名 <code>Button</code> → 模板中只用 <code>class="button"</code> 和 <code>class="button__icon"</code>
</li>
<li>禁止将 <code>button__icon</code> 抽成独立组件目录，它不是 Block，只是 button 的一部分</li>
<li>SCSS 中所有嵌套必须基于 <code>&__</code> 或 <code>&--</code>，禁用 <code>& > span</code> 或 <code>&.active</code>，否则 stylelint 会拦截</li>
</ul>
<h3>ViewEncapsulation.Emulated 下样式被覆盖？先查这三点</h3>
<p>即使 BEM 类名写对、HostBinding 用对，样式仍可能被外部穿透或失效。这不是 Angular bug，而是封装机制被绕过：</p>
<ul>
<li>检查是否误设 <code>encapsulation: ViewEncapsulation.None</code> —— 它会让所有类名全局暴露，彻底失去隔离</li>
<li>确认 <code>angular.json</code> 中 <code>stylePreprocessorOptions.includePaths</code> 是否包含全局 SCSS 路径，否则 <code>@import '_base.scss'</code> 可能失败，基础样式未注入</li>
<li>排查是否有跨块选择器残留，例如 <code>.card .button</code>，BEM 要求必须改用 <code>card__button</code> 类名驱动</li>
</ul>
<p>最常被忽略的是物理边界：BEM 文档不会告诉你 <code>button__text</code> 必须是 <code>button</code> 的直接子节点，但 Angular 模板里若写成 <code><button><span><span class="button__text"></span></span></button></code>，语义就已越界。</p>
</div>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
