css - 有没有激进的 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; }

需要明确的是，我所知道的所有压缩器，比如 YUI Compressor，只删除空格并可能加入一些属性(比如 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. 为 b 中的元素使用适当的权重函数 c。这可能是给定元素 b 的相邻元素的数量，或 accumulated lenght of properties - 累计长度的选择器。您的选择。

您可能会注意到，通过使用这种方法，您会得到一个二分图。现在试试下面的贪心算法(伪代码):

算法

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

备注

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

运行时估计

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