2

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

盒子对象

用于在 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>

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

4

1 回答 1

1

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

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

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

于 2013-07-23T11:57:36.673 回答