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的一部分，选择器特异性＆amp;包括订单等等...那么如何有效地压缩信息的工作，重复选择器或属性会更有效吗？

Answer 1

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

设置

扩展您的CSS（margin:1px 0 0 0;至margin-top:1px; margin-left:0px; ...）。
构建图G =（V，E），其中V为顶点集，E为边集：
- V由两组A（唯一选择器，例如div，p > span，#myid）和B（唯一属性，例如display:block;}的组合组成。，color:#deadbeef;）。
- E由选择器（在A中）和一个属性（在B中）之间的所有关联组成。
为c中的元素使用适当的权重函数b。这可以是给定元素b或accumulated lenght of properties - accumulated length of selectors的邻居数。你的选择。

您可能会注意到，通过使用此方法，您将获得二分图。现在尝试以下贪婪算法（伪代码）：

算法

在 B 中获取具有最大权重的元素 b 并将其添加到空集 Z
检查B中的另一个元素d是否具有相同的权重
- 如果存在这样的d，请检查它是否覆盖相同的选择器。
  1. 如果 d 涵盖相同的选择器：将 d 添加到 Z 并转到步骤2.
  2. 如果 d 未涵盖相同的选择器，请检查具有相同权重的下一个元素，或者如果您选中了所有元素 d ，请转到步骤3。
现在 Z 是一组涵盖某些选择器的属性。将其解析为CSS缓冲区。
删除 Z 中的所有元素及其在G中的相邻边缘，然后删除 Z 本身。
如果B不为空，请转到步骤1.
您的缓冲区包含一个预先缩小的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|))）。

Answer 2

CSS Tidy就像一个冠军！

像“black”或rgb（0,0,0）这样的颜色会转换为＃000000，或者更换为＃000（如果可能）。
如果一些十六进制代码较短，则会将其替换为颜色名称。
a {property：x; property：y;}成为{property：y;}
（所有重复属性合并）保证金：1px 1px 1px 1px;变为保证金：1px;
余量：0像素;变为保证金：0;
一个{边距：10px的;边距：10px的;保证金左：10px的; margin-right：10px;}成为
a {margin：10px;}
余量：010.0px;变为保证金：10px;
删除所有不必要的空格
取决于压缩级别，所有后台属性都已合并
删除所有评论
可以删除每个块中的最后一个分号
缺少分号
字符串中的错误换行符已修复
缺少单位
错误的颜色（和颜色名称）已修复
属性：价值！重要;成为财产：价值！重要;

Answer 3

你见过YUI Compressor吗？

Answer 4

您还可以使用http://www.minifycss.com/css-compressor/或http://www.ventio.se/tools/minify-css/

Answer 5

名为CSS Tools的项目声称要这样做。

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

5 个答案:

设置

算法

说明

运行时估计