不能混用.btn--primary和.button__icon，因前者是无上下文的OOCSS皮肤类，后者是强依赖.button块的BEM元素类；混用导致语义冲突、样式不可追溯、意外泄漏及tree-shaking失效。
为什么不能在同一个 HTML 元素上混用 .btn--primary 和 .button__icon
两者语义根本冲突：.btn--primary 是 OOCSS 风格的独立皮肤类，不依赖任何上下文；.button__icon 是 BEM 风格的强绑定元素类，离开 .button 块就失去意义。一旦写成 <button class="btn button__icon">，会出现以下问题：
- 样式来源不可追溯：开发者工具里看到 margin 覆盖 padding，但无法判断是哪个类在起作用
- 意外泄漏：若
.button__icon定义了margin-left: 8px，而它被误用在非按钮场景（比如<span class="button__icon">），就会污染其他布局 - 构建工具无法 tree-shake：打包时无法识别
.button__icon是否只配合.button使用，导致冗余 CSS 保留
怎样按职责分层隔离 OOCSS 与 BEM 类名
OOCSS 和 BEM 不是“怎么结合”，而是“怎么分工”。关键在于物理隔离和导入顺序：
- OOCSS 层只放原子级、无上下文依赖的类：
.f16、.bb-c、.p12、.grid-row，禁止出现__或-- - BEM 层只管业务模块外壳：
.card、.card__header、.card--shadow，所有命名必须严格三段式 - SCSS/Sass 中导入顺序必须是
@import "oocss/base"在前，@import "bem/modules"在后，否则基础类会被业务样式覆盖 - HTML 中允许共存，但仅限于“BEM 主体 + OOCSS 微调”：如
<div class="card__header f16 bb-c">，禁止<div class="card__header p12">（p12若影响结构，则属于 BEM 职责）
哪些 OOCSS 工具类能安全用于 BEM 组件内部
不是所有 OOCSS 类都适合嵌入 BEM 结构。判断标准只有一个：这个类是否改变组件的结构逻辑或行为边界？
- ✅ 允许：
f16（字号）、bb-c（下边框色）、tac（文字居中）——纯视觉原子，不干涉盒模型或流式布局 - ❌ 禁止：
p12（若它定义 padding）、flex（若它定义 display）、inline-block（若它覆盖组件默认 display）——这些直接干预结构，应由 BEM 块自身控制 - ⚠️ 特别注意：
.card__header的 padding 应该写在 BEM 层（如.card__header { padding: 16px; }），而不是靠p16工具类注入；否则未来想统一调整所有 header 内边距时，就得全局改p16，牵一发而动全身
团队落地最难的不是语法，而是粒度共识
没有文档能自动解决这个问题：.search-input 算 BEM 的 block，还是 OOCSS 的原子？.btn-group 是容器类（OOCSS），还是复合块（BEM）？这类判断没有绝对对错，全靠团队对 UI 粒度达成一致。
立即学习“前端免费学习笔记（深入）”；
一旦缺失共识，BEM 就只剩一堆带 __ 的 class 名，OOCSS 就退化成零散的 f14/c666 编码游戏——语法再规范，也挡不住人写错地方。
