不能在同一个组件层级混用BEM和OOCSS类名，因二者语义冲突：.btn--primary是上下文无关的可复用变体，.button__icon则强绑定于.button块内；混用导致样式来源模糊、权重竞争、调试困难及CSS体积膨胀，正确做法是按职责分层隔离——OOCSS管基础原子，BEM管业务模块。
不能在同一个组件层级上混用 BEM 和 OOCSS 类名，否则会引发样式来源模糊、特异性竞争和调试困难——这不是“怎么结合”，而是“怎么隔离”。
为什么.btn--primary 和 .button__icon 不能共存于一个元素
两者语义冲突：OOCSS 的 .btn--primary 是独立可复用的视觉变体，不依赖上下文；BEM 的 .button__icon 明确绑定在 .button 块内，脱离块即失效。一旦写成 ：
- 开发者工具里看到样式覆盖，但无法判断是
.button__icon的 margin 覆盖了.btn的 padding，还是反过来 -
.btn在别处被用作纯文本链接，.button__icon的margin-left会意外污染它 - 构建工具无法静态识别哪些
--modifier实际只用于某个__element，导致未使用的 CSS 无法 tree-shake
真正可行的分层共存方式
不是“混合写法”，而是按职责划清边界，让 OOCSS 管基础原子，BEM 管业务模块：
- 基础层（
@import "oocss/base"）：定义.form-control、.card、.grid-row，禁止出现__或-- - 业务层（
@import "bem/modules"）：所有页面级模块以.page-home、.search-bar开头，内部严格用__和-- - 导入顺序必须是 OOCSS 在前、BEM 在后，避免基础类被业务样式覆盖
微调时用 OOCSS 工具类，但仅限非核心样式
BEM 定义组件外壳（如 .card、.card__header），OOCSS 只能用于原子级视觉修饰，且必须满足约束：
- 允许：
.card__header f16 bb-c—— 复用已有的字号、边框色工具类 - 禁止：
.card__header p12—— 若p12是 padding 工具类，它可能与.card__header的布局逻辑耦合，破坏 BEM 边界 - 关键判断点：这个类是否影响组件结构或行为？如果是，它就该属于 BEM 层；如果只是颜色、字体、间距等纯视觉属性，且已在全局工具集中统一定义，才可引入
最难的部分从来不是语法或命名，而是团队对“这个类到底算块、元素，还是工具”达成共识——没有共识，BEM 就只剩壳，OOCSS 就只剩乱码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
