超紧凑的CSS答案

【问题标题】：Ultra compact css超紧凑的CSS
【发布时间】：2017-03-10 18:39:30
【问题描述】：

我想知道有没有办法通过合并所有相等的属性来压缩 CSS。

例子：

我的 css 文件：

.main{
    border: 3px solid red;
 }

.container .child{
    border: 3px solid red;
    background: blue;
}

element{
   margin: 4px 0px;
}

.xpto > li{
    border: 3px solid red;
    margin: 4px 0px;
    background: red;
}

需要输出：

.main, .container .child, .xpto > li{
    border: 3px solid red;
}
.container .child{
    background: blue;
}
.xpto li, element{
    margin: 4px 0px;
}
.xpto li{
    background: red;
}

有人知道吗？

【问题讨论】：

要么你把它写成想要的输出，要么你使用某种带有变量的 LESS、SASS、CSS 编译器
我怀疑这是否有意义 - 我敢打赌，在涉及平等特异性与规则排序的许多地方，这很容易让你陷入困境。
我同意@junkfoodjunkie。您还应该考虑到您将遇到令人讨厌的反模式，并且当您必须进行某种类型的维护时可能会讨厌自己。实际上，gzip 压缩您的项目会产生理想的结果，因为 gzip 会寻找重复。意思是，您的第一个示例实际上比您需要的输出更好。
是的，和/或简单地缩小 css 以删除空格，这也将产生性能提升，而无需重写、转译或以其他方式与代码的基本含义/结构混淆。赞成 bc 一个有趣的问题，但最终我认为你会得到的建议不是如何去做，而是为什么这是一个坏主意。

标签： html css sass gruntjs

【解决方案1】：

如果您熟悉 gulp，名为 gulp-cssnano 的 gulp 插件将能够按照您在问题中描述的方式缩小您的 CSS。

阅读here。

【讨论】：

【解决方案2】：

我知道这不是 100% 的要求 - 但可以使用 SCSS @extend 来完成

%back-blue{ background: blue; }
%back-red { background: red; }
%border   { border: 3px solid red; }
%margin   { margin: 4px 0; }

.main { 
  @extend %border; 
}   
.container .child {
  @extend %border;
  @extend %back-blue;
}
element {
  @extend %margin;
}
.xpto > li {
  @extend %border;
  @extend %margin;
  @extend %back-red;
}

输出：

.container .child { background: blue; }
.xpto > li { background: red; }
.main, .container .child, .xpto > li { border: 3px solid red; }
element, .xpto > li { margin: 4px 0; }

【讨论】：

Tks Jakob。 我也在想一些事情。这不是最漂亮的解决方案，但我希望在生产环境中使用类似的解决方案。