BEM与OOCSS不可混用同一层级，必须按职责分层：BEM管组件结构与边界（如card、card__header），OOCSS管原子级视觉修饰（如f16、bb-c），且工具类仅限加在BEM元素层级，禁止侵入块根或耦合布局逻辑。
谁在决定按钮颜色和尺寸
这直接决定该用 BEM 还是 OOCSS。button--primary 是 BEM 的修饰符，它属于按钮这个块，语义绑定强；btn btn--primary 是 OOCSS 的组合，btn 管结构（padding、border-radius），btn--primary 只管皮肤（background、color），两者可拆可叠。如果按钮样式由后端模板或 CMS 控制，比如「页面编辑器里拖一个蓝色大按钮」，OOCSS 更顺——HTML 直接写 class="btn btn--blue btn--large" 即可生效；如果按钮状态（如 is-loading）完全由 Vue/React 的响应式逻辑驱动，且需确保 card__button--loading 不会意外影响其他 button，BEM 的封闭命名更稳。
类名是否必须反映 DOM 层级
BEM 强制类名携带上下文：search-form__input--large 一眼可知它属于 search-form 块、是其 input 元素、处于 large 状态；即使抽离 HTML，也能反推结构。OOCSS 不关心这点：input-large 或 f16 只表达“大”或“字号 16”，不绑定父级，可跨块复用，但也意味着你得靠文档或约定才知道它该用在哪儿。常见错误现象：新人直接给 <div class="f16 c333"></div> 加样式，结果发现 f16 在另一处被改成 font-size: 18px，全局失效却查不到源头。
修饰符能不能叠加使用
BEM 的修饰符是完整语义单元：button--primary 和 button--disabled 是两个互斥状态，不能同时生效；需要组合时必须写成 button--primary-disabled，CSS 里单独定义。OOCSS 则鼓励叠加：btn btn--primary btn--large，每个类只管一个维度，靠 CSS 层叠生效。但要注意权重问题：btn--primary 被覆盖，可能是因为 btn 基础类里用了 !important，而叠加类没声明足够权重。BEM 中改一个状态就得新增类名，CI 流程若没校验类名白名单，容易漏写 CSS 规则导致视觉丢失。
混用时怎么分工才不乱
真实项目里 BEM 和 OOCSS 不是二选一，而是分工协作：
- 组件外壳用 BEM：
card、card__header、card--shadow——明确边界、隔离作用域 - 内部微调用 OOCSS：
card__header f16 bb-c——复用已有的字号、边框色工具类，不重复造轮子 - 关键约束：
f16这类工具类不能用于定义组件核心行为（比如card__header的padding或display），只负责视觉原子属性
立即学习“前端免费学习笔记（深入）”；
