OOCSS本质是解耦结构与表现、容器与内容的可复用对象思维，关键在识别跨上下文稳定的样式逻辑，而非命名形式；需通过人眼审查类是否只做一件事、能否脱离原上下文安全复用。
OOCSS不是一套能自动生效的规则，而是一套需要人主动判断、持续约束的写法习惯。直接照搬BEM命名或加一堆类名，不等于就在用OOCSS。
怎么拆出真正可复用的「对象」
关键不是起名，而是识别哪些样式逻辑是跨上下文稳定的。比如一个卡片容器，如果它总要带阴影、圆角、内边距、白底，那这些就应该抽成 .card；但如果每次用都要手动覆盖 margin 或 background，说明这个类还没抽象到位。
- 先看重复：5个地方都写了
padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1);→ 这就是.card的信号 - 再看耦合：如果
.card里写了width: 320px;或float: left;，它就只适用于某一种布局场景，不是OOCSS对象 - 最后看组合：一个模块需要「卡片+深色皮肤+网格布局」，应写成
class="card skin-dark mod-grid"，而不是.card-dark-grid
为什么 .btn + .btn-lg 比 .btn-large 更符合OOCSS
因为 .btn-lg 只负责尺寸这一件事，和按钮结构、颜色、状态完全解耦。你可以把它用在 <input>、<a>、甚至 <div role="button"> 上，只要语义合理。
-
.btn定义基础交互行为（cursor: pointer、user-select: none、outline重置） -
.btn-lg只改font-size、padding、line-height，不碰颜色或边框 -
.btn-secondary只管颜色体系，不指定尺寸或圆角 - 错误示范：
.btn-primary-lg把职责混在一起，一旦设计要求“主按钮在移动端变小”，就得新增类或改已有类
常见误用：把BEM当OOCSS用，却没解耦结构与表现
BEM命名本身不保证OOCSS效果。你写 .card__header 没问题，但若它内部定义了 margin-top: -1.5rem; 或 position: absolute;，这个类就无法脱离当前卡片结构复用——它其实是个“位置绑定型片段”，不是对象。
立即学习“前端免费学习笔记（深入）”；
- 检查
.card__header是否能在<section class="article">里安全使用而不破坏布局 - 避免在对象类中写强定位、强尺寸、强容器依赖的样式（如
top: 0、width: 100%、margin-left: 200px） - 布局职责交给容器类（如
.mod-flex、.mod-grid），对象类只管自身形态 - 伪类状态尽量外提：
.is-disabled比.btn:disabled更易复用到非原生按钮上
怎么验证自己写的类是不是OOCSS风格
最简单的测试方式：删掉它所在的父元素，或者把它挪到另一个完全无关的模块里，看样式是否依然合理、不崩、不依赖上下文。
- 如果
.media在<article>和<aside>里都能正常显示图文排列，说明它合格 - 如果
.form-row一离开<form class="user-edit">就错位，大概率它偷偷绑定了父容器的display: grid或gap - 工具无法帮你判断——
stylelint-selector-bem-pattern只验命名，不验逻辑；必须靠人眼 Review 类的声明块是否只做一件事、是否可预测地复用
真正的难点不在命名，而在每次写新类前，多问一句：“这个样式，下次出现在别的页面、别的组件里，我敢不敢直接复制粘贴过去用？”
