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

Question

在我问问题之前，这是我指的代码:

盒子对象

用于在 Bootstrap 中将 Island 或 Islet 等内容框起来。

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

圆皮

制作圆 Angular 。它被多个抽象类使用，例如 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”等全局事物不应作为独立实体重复使用。

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

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