高级 Post-进程 CSS：组 "media query" 和 "equal rules"，删除 "unused properties"

Question

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

例如，我知道这是最小化 .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，因此它应该是 "condensed" in:

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

Answer 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 class 上的两个声明是相等的，第二个可以跳过，但是第二个 .b { color:red;} 在之后 .c { color:green;} 打破默认行为

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

缩小为：

.a,.b{color:red}

问题不大，但确实存在。

高级 Post-进程 CSS：组 "media query" 和 "equal rules"，删除 "unused properties"

Advanced Post-process CSS: group "media query" and "equal rules", remove "unused properties"

css

post-processor

它将媒体查询分组：

它分组等于 CSS 节：

它删除了覆盖的 CSS 规则：