需要帮助了解我应该如何定义oocss对象和皮肤

Question

在我提出问题之前，这是我所指的代码：

Box对象

用于在Bootstrap中封装像Island或Islet这样的内容。

.box { margin-bottom: 24px; padding: 12px; }    
.box--s { padding: 8px 12px; }  
.box--l { padding: 24px 12px; }

圆形皮肤

制作圆角。它被几个抽象类使用，例如box。

.round { border-radius: 4px; }  
.round--s { border-radius:2px; }    
.round--l { border-radius:8px; }

在皮肤抽象的代码中，你会写：

<div class="round box">  Example </div>

我有其他皮肤可以扩展框，例如灰色，警报和标签。

---

现在问题

我正在处理一个按钮对象。但由于它具有与box相同的规则和修饰符，并且可以具有相同的圆形修饰符，我应该将其声明为皮肤吗？所有按钮都添加了四个“外观”规则如果它与边距或填充混淆我会说它应该是一个对象。

在代码中你会写

<a class="round btn box">  Example </a>

或者将其调整为较小

<a class="round btn box box--s">  Example </a>

保持这种干燥的矫枉过正吗？令我担心的是，按钮是页面上常见的元素 - 但实际上它只是扩展了一个对象和我已编写的修饰符。

Answer 1

这一切都归结为我们是否应该使用全局修饰符（如.round，.box）的问题。至于我，那些与它们相关的语义很少，我宁愿将它们整合到单个对象中。像“.hidden”，“。around”或“.green”这样的全球内容不应该作为独立实体重复使用。

所以，我更喜欢一个“按钮”对象，它在语义上与“盒子”不同。对该按钮的所有修改都将是该按钮的组成部分，而不是某些全局类。如果你需要做事，请在特定对象上使用修饰符;为了统一值，你总是拥有你的CSS预处理器，不必在语义（即基于类名）的层面上公开。

顺便说一句，这完全是我个人的意见。