高级后处理 CSS：分组“媒体查询”和“相等规则”，删除“未使用的属性”答案

【问题标题】：Advanced Post-process CSS: group "media query" and "equal rules", remove "unused properties"高级后处理 CSS：分组“媒体查询”和“相等规则”，删除“未使用的属性”
【发布时间】：2015-12-11 17:55:52
【问题描述】：

我正在寻找可以优化 CSS 文件的“CSS 后处理器”。

例如，我知道这是最小化 .css 文件的工具，但我希望在此优化中更进一步。以下是一些可能的标准示例：

1) 群组媒体查询：

如果我有同一个媒体查询的多个实例，这个工具应该将所有选择器分组到一个实例下

2) 分组平等规则：

如果我有这些规则：

.foo1
{
  color:red;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

它们应该组合成以下最终的 CSS：

.foo1,
.foo2
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
}

3) 删除未使用的属性：

如果我有这些属性：

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

很明显，使用此声明命令.foo1 将永远不会应用color:red，因此应将其“压缩”在：

.foo1
{
  color:blue;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

【问题讨论】：

你试过http://cssminifier.com/吗？它似乎符合您的所有条件。
@AnthonyHilyard 好吧，它似乎与我正在寻找的非常相似。请将您的评论转换为详细的答案:-)

标签： css post-processor

【解决方案1】：

试试http://cssminifier.com/。

它将媒体查询分组：

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
@media screen and (max-width: 300px) {
    html {
        background-color: lightblue;
    }
}

变成：

@media screen and (max-width:300px){body,html{background-color:#add8e6}}

它将相等的 CSS 节分组：

.foo1
{
  color:red;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

变成：

.foo1,.foo2{border:1px solid green;font-size:13px;text-align:center}.foo1{color:red}.foo2{color:#00f}

它删除了覆盖的 CSS 规则：

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

变成：

.foo1{border:1px solid green;font-size:13px;text-align:center;color:#00f}

当然，您可能希望在最小化 CSS 代码后对其进行美化。如果是这样，请通过 CSS 格式化程序运行它，例如 http://www.cleancss.com/css-beautify/。

问题作者更新：

实际上，CSSMinifier 有一个特定的情况，即缩小并不完美。看下面的代码：

.a { color:red;}
.b { color:red;}

.c { color:green;}
.c { color:green;}
.b { color:red;}

被最小化为：

.a{color:red}
.c{color:green}
.b{color:red}

CSSMinifier，正确理解.c类上的两个声明是相等的，第二个可以跳过，但第二个.b { color:red;}在之后 .c { color:green;} 打破了默认行为，其中

.a { color:red;}
.b { color:red;}

在以下位置被缩小：

.a,.b{color:red}

不是一个严重的问题，但它确实存在。

【讨论】：