需要帮助理解如何定义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>

我有其他皮肤扩展框，如灰色，警觉，和标签。

现在来问这个问题

我正在处理一个按钮对象。但是既然它和方框有相同的规则和修饰符，并且可以有相同的圆形修饰符，那么我应该把它声明为皮肤吗？所有按钮做的是添加大约四个规则的“外观”，如果它扰乱了边距或填充，我会说，它应该是一个对象。

在代码中，您将编写

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

或者调整它的尺寸

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

让它干得这么干是不是过分了？让我担心的是，按钮是页面上的一个常见元素--但实际上它只是扩展了一个对象和我已经编写的修饰符。

Answer 1

这一切归结为我们是否应该使用全局修饰符(如.round、.box)。对我来说，这些语义与它们几乎没有关联，所以我喜欢将它们集成到单独的对象中，始终如此。像".hidden“、".round”或".green“这样的全局事物不应该作为独立实体被重用。

因此，我更希望有一个“按钮”对象，在语义上与"box“不一样。对该按钮的所有修改都是该按钮的组成部分，而不是某些全局类。如果您需要对特定的对象使用修饰符；为了统一值，您总是有CSS预处理器，这不需要在语义(即基于类名的)级别上公开。

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