具有大量重复样式的CSS的性能，gzip压缩

Question

假设我有一个包含10种博客文章的网站。它们应该共享相同的边距，填充，字体大小，字体等，但每种类型应该具有独特的颜色。

我通常如何做

的CSS：

.post { margin: 10px; padding: 5px; font-size: 1em; } 
.post--xmas { color: red; } 
.post--halloween { color: orange; }

HTML

<div class="post post--xmas">ho ho ho</div>
<div class="post post--halloween">booOoooo</div>

可替换地： 每个元素只使用一个类：

.post--xmas { margin: 10px; padding: 5px; font-size: 1em; color: red; } 
.post--halloween { margin: 10px; padding: 5px; font-size: 1em; color: orange; }

HTML：

<div class="post--xmas">ho ho ho</div>
<div class="post--halloween">booOoooo</div>

单级方法是否存在性能下降？

复制这么多css规则感觉不对。当存在大量重复规则时，输出css会变大。

但gzipping删除了大部分内容，浏览器下载的文件仍然非常小。

所以我的问题是：单一类方法是否有任何性能下降？

• 尽管下载的gzip文件非常小，但解析css需要很长时间，因为“解压缩”的css不必要地大了吗？
• 当样式规则的总和相同时，每个元素使用1而不是2个类来解析或布局元素是否有任何好处？我知道更简单的选择器比复杂的选择器更快，但是没有多少关于同一级别的类数量的影响。

注1：这是一个简化的例子。实际上，我们将讨论数百行重复代码。

注意2：我当然不会手动编写重复的CSS。我在预处理器中编写样式，所以我会使用这样的mixin :(伪代码）

.post--xmas {
    import @post;
    color: red;
}