mix-blend-mode作用于元素内容与背后层的混合，background-blend-mode仅作用于元素自身多背景间的混合；bem mix是语义共存的结构模式，与css混合模式无关。
mix-blend-mode 和 background-blend-mode 容易混淆
这两个属性名字像，但作用对象完全不同，用错就完全没效果。mix-blend-mode 是让当前元素的「内容」和它**背后的层**（比如父容器、更底层的兄弟元素）混合；而 background-blend-mode 只影响该元素自身的多个背景图或背景色之间的混合。如果你只想让一个按钮同时带渐变+纹理图，该用后者；想让文字穿透上层遮罩显出底图层次，才轮到前者。
BEM 中的 Mix 不是 CSS blend 模式
这是最常被搜错的关键点：BEM 的 Mix 和 CSS 的 mix-blend-mode 毫无关系。BEM Mix 是一种结构模式，指在同一个 HTML 元素上同时声明多个 BEM 实体（比如一个 <div> 既是 <code>header Block，又作为 layout Block 的一部分），从而复用样式和行为逻辑。
- 必须确保各 Block 的 class 名互不冲突，例如
class="header layout__region"是合法 Mix，而class="header layout"就可能因命名重叠导致样式覆盖 - Mix 不改变 DOM 层级，也不触发嵌套选择器——BEM 规则依然要求所有样式都基于 class，禁用标签和 ID 选择器
- JS 行为需显式区分：如果
header有初始化逻辑，layout__region也有，就得在脚本里判断是否同时存在这两个 class，再决定执行哪套逻辑
同一元素上写多个 BEM 块名的实际限制
能写，但不是随便堆砌。BEM 官方强调 Mix 的前提是「语义兼容」：几个 Block 在当前上下文中确实扮演不同且并存的角色。比如一个搜索框可以同时是 search-form（功能块）和 theme-dark（主题修饰块），但不能同时叫 button 和 card——这违反了 Block 的独立性定义。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Modifier 类型的 Mix（如
button button_size-large button_theme-contrast）最安全，推荐优先使用 - 跨领域 Block 的 Mix（如把
menu和tab写在同一标签上）容易导致维护困难，后续改 menu 样式时可能意外影响 tab 的布局 - 构建工具（如 PostCSS BEM 插件）通常不自动处理 Mix 场景，所有 class 都得手写或靠模板引擎拼接，漏写或顺序颠倒不会报错，但样式会静默失效
为什么开发者常在这里翻车
根本原因在于混淆了「视觉重叠」和「语义共存」。看到两个样式都生效了，就以为 Mix 成功了；实际上可能只是 CSS 层叠巧合，或是某个 Block 的样式太宽泛（比如用了 .block { margin: 0 } ），无意中污染了其他 Mix 进来的 Block。
真正健壮的 Mix 必须满足：每个 Block 的样式只作用于自身职责范围，不假设 DOM 结构、不依赖兄弟节点、不设置会影响外部的 margin 或 position。这点在用 Sass/Less 的 & 嵌套生成 BEM 类名时尤其难守住——嵌套层级一深，很容易写出 .block__elem { .other-block { ... } } 这种破坏隔离性的代码。
