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

Question

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

盒子对象

用于在 Bootstrap 中框出岛屿或小岛等内容。

.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有同样的规则和修饰符，并且可以有同样的round修饰符，我应该把它声明为一个皮肤吗？所有按钮所做的只是为“外观”添加大约四个规则如果它与边距或填充混淆，我会说它应该是一个对象。

你会写的代码

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

或者缩小尺寸

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

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

Answer 1

这一切都归结为我们是否应该拥有全局修饰符（如 .round、.box）的问题。至于我，那些与它们相关的语义非常少，我更喜欢将它们集成到单独的对象中，总是。像“.hidden”、“.round”或“.green”这样的全局对象不应该作为独立实体重用。

所以，我希望有一个在语义上与“框”不同的“按钮”对象。该按钮的所有修改都将是该按钮的组成部分，而不是某些全局类。如果您需要使事物变圆，请在特定对象上使用修饰符；为了统一值，你总是有你的 CSS 预处理器，它不必在语义（即基于类名）级别上公开。

顺便说一句，这完全是我个人的看法。