OOCSS提高代码复用性靠结构与皮肤分离：结构类定义布局属性（如尺寸、间距、圆角），皮肤类仅负责视觉样式（如颜色、阴影），二者解耦可自由组合；禁用后代选择器和@extend，坚持原子化类名直接作用于元素。
OOCSS 提高代码复用率，不是靠多写几个类名，而是靠强制把「结构」和「皮肤」拆成两个独立、可自由组合的维度——同一套 DOM，换一个类名就能变出新样式，根本不用复制粘贴整段 CSS。
结构类只管“站得稳”，皮肤类只管“好不好看”
结构类定义组件的基础形态：尺寸、间距、显示方式、圆角、边框粗细这些影响布局的属性；皮肤类只负责颜色、背景、阴影、文字色等纯视觉表现。两者完全解耦。
-
.card定义padding、border-radius、margin—— 换个页面位置也不会塌 -
.card--highlight只加background-color和box-shadow—— 换个容器照样生效 - 错误做法：
.card-primary里既写padding: 16px又写background: #059，结果改主题时必须重写整个类，或堆!important
为什么不能用 .card .btn 这种后代选择器写皮肤
后代选择器把样式逻辑锁死在特定 DOM 层级里，违背“容器与内容分离”原则。
- 按钮从
<div class="card">里挪到弹窗里，.card .btn立刻失效 - 你无法单独测试
.btn--primary在任意上下文是否可用——它依赖父元素存在 - 正确姿势是原子化类名：
.btn.btn--primary直接作用于元素本身，不挑位置
@extend 看似省事，实际破坏原子性
Sass 的 @extend 容易让人误以为“继承结构类 = 复用”，但编译后仍生成冗余选择器，失去 OOCSS 的核心价值。
立即学习“前端免费学习笔记（深入）”；
-
.btn--primary {@extend .btn; background: #007bff;}编译后可能输出.btn, .btn--primary { ... }，体积没省多少 - 更糟的是，它让皮肤类不再独立——删掉
.btn就连带崩掉所有btn--* - 真正复用靠的是 HTML 层面组合：
<button class="btn btn--primary">，而不是 CSS 层面继承
最容易被忽略的一点：结构类要不要带尺寸？要，但必须判断这个属性改了会不会让组件“站不住”。比如 font-size 改小导致文字溢出、padding 归零让点击区域消失——这些就是结构责任，不是皮肤该管的事。
