BEM与OOCSS核心区别在于样式控制权归属和语义绑定方式：BEM类名强制携带上下文（如search-form__input--large），可反推DOM结构与状态；OOCSS类名仅表达单一职责（如btn管结构、btn--primary管皮肤），不绑定层级，靠组合生效，适用于模板/CMS主导样式决策，而BEM适用于JS驱动状态且需强隔离的场景。
核心区别不在语法，而在样式控制权归属和类名语义绑定方式。 BEM 类名自带上下文（search-form__input--large 一眼可知它属于哪个块、是哪个元素、什么状态）；OOCSS 类名只表达单一职责（btn 管结构，btn--primary 管皮肤），不绑定 DOM 层级，靠组合生效。
谁决定按钮颜色和尺寸？这直接决定该用 BEM 还是 OOCSS
BEM 假设组件状态由 JS 驱动且需强隔离：card__button--loading 不会意外影响其他 button；OOCSS 假设模板或 CMS 主导样式决策，HTML 直接写 class="btn btn--blue btn--large" 就能生效。常见错误：在 Vue 中用 btn btn--primary 响应式切换，结果 btn--primary 被全局 CSS 规则覆盖，而开发者误以为是 JS 没触发——其实是 OOCSS 的权重没对齐。
类名是否必须反映 DOM 结构？BEM 强制，OOCSS 忽略
BEM 要求命名可反推 HTML：header__logo--inverse 明确表示它是 header 块下的 logo 元素、处于 inverse 状态；OOCSS 的 f16 c333 只表达“字号 16、颜色 #333”，不承诺用在哪一层。容易踩的坑：
- 新人直接给
<div class="f16 c333"></div>加样式，后期发现f16在另一处被改成font-size: 18px，全局失效却查不到源头 - OOCSS 工具类若没配套设计系统文档，团队成员无法判断
bb-c是“底部边框+居中”还是“背景蓝+文字白”
BEM 的修饰符不能叠加，OOCSS 鼓励叠加
BEM 中 button--primary 和 button--disabled 是互斥语义单元，要同时存在必须新定义 button--primary-disabled；OOCSS 则靠层叠：btn btn--primary btn--large 各管一维。但要注意：
立即学习“前端免费学习笔记（深入）”；
- OOCSS 叠加类名越多，HTML 体积越大，CSS 选择器匹配开销越明显（虽小但可测）
- BEM 状态爆炸时（如
button--primary-large-rounded-shadow）维护成本陡增，CI 流程若没校验类名白名单，容易漏写 CSS 规则导致视觉丢失 - 混用时建议：组件外壳用 BEM（
card、card__header），内部微调用 OOCSS（card__header f16 bb-c）
真正难的不是选 BEM 还是 OOCSS，而是当后端模板动态注入 class="btn btn--red"，而前端又用 Vue 响应式控制 is-loading 时，你得想清楚：这个 btn--red 是该写成 btn--red（OOCSS）还是 card__button--red（BEM）——前者灵活但易失控，后者封闭但耦合模板逻辑。
