我可以缩短我的CSS吗？

Question

以下是我应用不同颜色背景的原始CSS：

.one-colour {
    background-color:#153a63;
}

.two-colour {
    background-color:#f16c24;
}

.three-colour {
    background-color:#337db9;
}

我知道你可以做多个CSS类，比如.one.two.three {...}

但我的CSS是否尽可能缩小了？而且我并不是指将代码放在一行上以使其更短＆＃34;。

Answer 1

  

但我的CSS是否尽可能缩小了？

是（ISH）

每个CSS规则都将相同的属性样式设置为不同的值。因此，您已将规则集压缩到最小数量的规则以允许此级别的区分。如果有的话，您可以简单地将background-color更改为background - 如果背景属性未设置在可以覆盖的其他规则中。

^{*虽然我的倾向是这应该是一个评论，但我认为它实际上是对你的问题的回答。}

其他方法更新：

正如评论中所提到的，还有其他一些（矫枉过正的？）冷凝方法：

1. 将所有内容放在一行中，删除空格（缩小）

2. 缩短您的班级名称，例如（.one-colour - ＆gt; .c1），如下所述，这是一个主观的，背景敏感的决定

3. CSS规则中的最后一个样式设置不需要使用尾部分号来处理规则，因此您也可以删除这些

4. 将您的HEX颜色转换为3位数字（约），#036，#F63和#36C

Answer 2

根据您使用这些类的方式，可能有一种方法可以删除其中一个类。

如果您在特定容器中使用这些类 - 您可以将其中一种颜色应用于容器，然后仅在2个内部div上覆盖它。

同样，这取决于你如何使用这些类。

Answer 3

是的，我会这么说。如果您想立即开始对所有类进行操作（例如向所有类添加黑色边框），那么您可以将其组合到一行，如您所建议的那样。否则，它看起来就像它现在要的那样紧凑。我不能建议改进。