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 层级里，违背“容器与内容分离”原则。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 按钮从 <div class="card"> 里挪到弹窗里，<code>.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"></button>，而不是 CSS 层面继承

最容易被忽略的一点：结构类要不要带尺寸？要，但必须判断这个属性改了会不会让组件“站不住”。比如 font-size 改小导致文字溢出、padding 归零让点击区域消失——这些就是结构责任，不是皮肤该管的事。