3

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

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

1）组媒体查询：

如果我有同一个 mediaquery 的多个实例，则此工具应将所有选择器分组在一个实例下

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;
}
4

1 回答 1

2

试试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类上的两个声明是相等的，所以可以跳过第二个，但是.c { color:green;}.b { color:red;} 之后的第二个 会破坏默认行为，其中

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

在以下位置被缩小：

.a,.b{color:red}

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

于 2015-09-15T16:44:29.093 回答