是否有任何激进的CSS缩小工具？

Question

我想知道是否有人知道一个工具将积极重写CSS以更有效地压缩样式.我想要:

.foo { color : red; font-size: 16px; height: 20px; }
.bar { color : red; font-size: 16px; height: 30px; }

被压缩为:

.foo, .bar { color : red; font-size : 16px; }
.foo { height : 20px; }
.bar { height : 30px; }

要清楚,我所知道的minifiers,像YUI压缩机,只删除空白,并可能加入一些属性(如font-family和font-size成font).我正在寻找一些愿意完全重写文件结构的东西.

除此之外,如果有人知道任何人在这背后的压缩逻辑方面所做的任何工作,那么这些信息将不胜感激.如果我找不到一个,我正在考虑写自己的东西,但有一百万件要考虑的事情,如margin-top覆盖部分margin,选择器特性和包括订单等等......那么如何有效地工作压缩信息,重复选择器或属性会更有效吗？

Answer 1

我不知道任何积极的CSS缩小工具,但您可以使用以下方法:

建立

1. 扩展你的CSS(margin:1px 0 0 0;到margin-top:1px; margin-left:0px;...).
2. 构建图G =(V,E),其中V为顶点集,E为边集:
   • V由两组A的结合的(独特的选择器,例如.div,p > span,#myid)和B(独特的性能,例如.display:block;,color:#deadbeef;).
   • E由选择器(在A中)和属性(在B中)之间的所有关联组成.
3. c为你的元素使用适当的权重函数b.这可能是给定元素的邻居数量b,或者accumulated lenght of properties - accumulated length of selectors.你的选择.

您可能会注意到,通过使用此方法,您将获得二分图.现在尝试以下贪心算法(伪代码):

算法

1. 取的元素b在乙具有最大权重,并将其添加到一个空集ž
2. 检查B中的另一个元素d是否具有相同的权重
   • 如果此类广告存在,请检查它是否涵盖相同的选择器.
     1. 如果d覆盖相同的选择器:将d添加到Z并转到步骤2.
     2. 如果d不包括同选择检查下一个元素以相同的重量或转到第3步,如果你检查了所有的元素ð.
3. 现在Z是一组涵盖一些选择器的属性.将此解析为CSS到缓冲区.
4. 删除Z中的所有元素及其在G中的相邻边,并删除Z本身.
5. 如果B不为空,请转到步骤1.
6. 您的缓冲区包含一个预先缩小的CSS代码.您现在可以合并一些属性(例如margin-top:0px;margin-left:1px).

备注

请注意,实际压缩取决于您的体重功能.因为它是一个贪婪的算法,它可能会返回一个缩小的CSS,但我相信有人会发布一个反例.另请注意,在删除Z中的元素后,您必须更新权重函数.

运行时估计

|B|^2*|A|如果我没有弄错的话,该算法将始终终止并将在O()中运行.如果您使用堆并对每个邻接列表中的属性进行排序(设置时间O(|B|*|A|log(|A|))),您将获得O(|B|*|A|* (log(|B|)+log(|A|))).