Question

我正在寻找任何一种优化CSS关于HTML结构的CSS优化器。我希望优化器比CSSTiny好，因为HTML是完全已知的。

这是一个例子。对于像这样的完整HTML：

<html>
  <head>
  </head>
  <body>
    <div id="id1">
      some text here
    </div>
    <div id="id2">
      another text here
    </div>
  </body>
</html>

使用CSS：

body {
    font-size: 12px;
}

#id1 {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    font-size: 14px;
}

#id2 {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    font-size: 12px;
}

CSS Optimizator应该产生：

body {
    font-size: 12px;
}

div {
    margin: 10px auto;
}

#id1 {
    font-size: 14px;
}

#id2 {
    margin-bottom: 0;
}

甚至更多，理想输出（由@animuson反馈改变）：

body {
    font-size: 12px;
}

div {
    margin: 10px auto;
}

div:last {
    margin-bottom: 0;
}    

#id1 {
    font-size: 14px;
}

CSS短片的使用是无关紧要的 - 它很简单并且已经存在。我要求一些非常聪明的CSS优化器。奖金是否适用于HTML文件的收集而不是一个使用相同CSS的文件。

感谢您的回答！鲍里斯。

Answer 1

啊，如果只有程序可以做到这一点，我们只需点击一个按钮就可以建立一个网站。

由于我们尚未进入这个乌托邦，我们仍然必须优化我们自己的代码。这是正确的做事方式。

如果该代码来自生成器，请改进它。如果你写的，那么......你知道。

Answer 2

嗯，最接近你想要的东西。我知道的是：https://github.com/afelix/csso

它可以进行一些智能优化，例如：

合并具有相同选择器的块
合并具有相同属性的块
删除被覆盖的属性
删除被覆盖的速记属性
删除重复选择器
块的部分合并
块的部分拆分

参见手册：https://github.com/afelix/csso/blob/master/MANUAL.en.md

但它仍然只适用于css文件，它没有解析html结构并对其进行优化。

基于HTML结构的CSS优化器

2 个答案: