是否有高级 CSS 缩小器/编译器可以执行诸如去除冗余和逗号分隔相同规则之类的操作？

Posted 2023-02-21

【中文标题】是否有高级 CSS 缩小器/编译器可以执行诸如去除冗余和逗号分隔相同规则之类的操作？

【英文标题】：Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

【发布时间】：2011-06-20 05:16:01

【问题描述】：

例如

inputmargin:0bodymargin:0;background:white

这样写会更短

input,bodymargin:0bodybackground:white

或者这个

input,bodymargin:0bodymargin:0;padding:0

这样写会更短

input,bodymargin:0bodypadding:0

结论没有这样的工具查看接受的答案。

给工具作者的提示，您可能想要考虑 gzip。有时，在二流优化上留下几个字节最终会更短，因为 gzip 本质上是字节级重复数据删除。如果有两个相同的部分，gzip 将引用较早的部分。 理想情况下在决定是否应部分或全部跳过某些优化以及选择器和规则的顺序时应考虑这一点。

【问题讨论】：

是的，但我每小时收费 30 美元。

总是想写一个工具来做到这一点......

【参考方案1】：

这可以使用CSSO 来完成。

考虑以下输入：

inputmargin:0bodymargin:0;background:white

CSSO 输出：

input,bodymargin:0bodybackground:#fff

（正是您要找的）

但不幸的是，CSSO 对此进行了优化：

.dont-care 
    background-image: url("images/chart.png");
    background-repeat: no-repeat;

收件人：

.dont-carebackground-image:url("images/chart.png");background-repeat:no-repeat

但是，CSSTidy 将上述转换为相应的速记属性：

.dont-care 
    background:url("images/chart.png") no-repeat;

七 优化 CSS 的四步解决方案： 这是我遵循的做法：

合并all.css中的CSS文件。 提供给CSSO输入。 点击最小化 将输出粘贴到all.min.css

除了支付@Grillz 手动完成它之外，到目前为止，我还没有找到更好的 CSS 优化交易..

但是旧的 IE hack 呢？ 如果您对 IE6 和 7 使用 CSS hack，CSSO 将保留这些 hack。

例如：

.dont-care 
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;

CSSO 输出：

.dont-carebackground-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat

CSSTidy 将忽略 asterik(* hack used for IE6)，并输出：

.dont-care 
    background:url("images/chart.jpg") no-repeat;

您还可以避免黑客攻击，并为旧版 IE 使用单独的 CSS 文件（比如 all.oldIE.css）。在分别优化（使用前面描述的 7 个步骤）这两个文件之后，这就是您最终可以在 html/masterpage/template/layout 文件的

标记中使用的内容：

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

其中all.min.css 将适用于除IE 版本小于等于7 之外的所有浏览器。但单独使用CSSO 是一个安全的选择。

更新

跳过 CSSTidy 部分。 CSSO 进行安全优化。 According to their developer，速记优化不安全：

考虑这个例子：

.a
    background-attachment: fixed;

.b 
    background-image: url("images/chart.png");
    background-repeat: no-repeat;

如果你有<div class="a b"></div>——一个同时拥有的元素 类，你不能在你写的时候优化 .b，因为它会 覆盖在.a 中设置的background-attachment。 所以，不，这不是一个安全的优化。

【讨论】：

感谢您解释为什么不能进行自动速记。

【参考方案2】：

看看 CSS Tidy，它可以做一些合并：http://csstidy.sourceforge.net/

【讨论】：

他们的功能列表似乎无法达到我所描述的水平（我不怪他们，除了将整个项目转换为 GWT 之外，我几乎没有期望在任何地方找到这样的工具。）

【参考方案3】：

如果您使用 Visual Studio，则可以安装 Web Essentials 扩展。它有 对清理和合并 CSS 规则的实验性支持，但与您订阅的不完全一样。 一方面，它创建了更多的空白，但它确实结合了具有（部分）相同样式的 css 标签，例如..

【参考方案4】：

尝试更少。

LESS 会在您保存 *.less 文件时自动识别并立即编译您的 CSS 代码并进行压缩。您可以根据需要创建任意数量的文件，LESS 会观察它们以触发编译。

您只能在.less 文件中工作。该工具将自动编译并将您的文件保存为.css

http://lesscss.org/

【参考方案5】：

我会推荐 https://www.npmjs.com/package/gulp-clean-css

如果你使用 gulp 没有问题 它完全按照您的意愿进行

【参考方案6】：

可能是错的，但是 http://www.cleancss.com/?

【讨论】：

差不多了。至少他们将formmargin:0bodymargin:0 转换为form,bodymargin:0。它还缩短了颜色名称（#FF0000 更短为 red）。它不处理问题中的示例。

CleanCSS.com 基于旧版本的 CSS Tidy。通过 Google 找到一个运行最新版本的站点：cdburnerxp.se/cssparse/css_optimiser.php

【参考方案7】：

不，没有这样的工具可以优化到您要求的级别（至少我知道），如果有的话，我不确定您是否愿意使用它。原因是找到 smallest 可能的缩小 css 代码不是一个小问题。对于您提供的琐碎 CSS，这很容易。但是想象一下在 300kb 的 CSS 块上做这件事。这不是微不足道的。是否值得浪费 CPU 时间来生成它（如果您正在缓存结果，可能是这样，但如果您是动态地提供它就不会）？

还有什么收获？在转账上最多节省几个百分点？除非您有 facebook 级别的流量，否则您不会节省太多带宽。并且百分之几也不会对您的用户产生太大影响（即使通过拨号，传输几 kb 也不是那么糟糕）。

只需使用标准压缩器（minify、YUI Compressor 等）即可完成。相反，担心低悬的果实。容易解决的问题...

【讨论】：

计划是在所有应用程序上缓存所有 CSS 和 javascript 的缩小和 gzip 压缩版本，假设它们有一个注释掉的行，说明可以这样做（而不是尝试调试代码）。这也是为了混淆，以使我们的代码更难运行。对于文件的每次更改，CPU 只会发生一次。这种处理将在网络服务器级别上进行，该级别将被复制到许多服务器。 - - - 所以如果有可用的，我会使用它。虽然我们没有 Facebook 级别的流量，但我们确实希望让我们的代码不被泄露。

@George：为了混淆或阻止您的代码泄露，这不是正确的方法。这是一个单独的问题（我认为在这种情况下无法解决），所以它可能应该被这样对待......

【参考方案8】：

是的，有。 YUI Compressor 为你做这个。 我错了，YUI Compressor 只是一个缩小器，但确实非常有用。他们缩小的内容和方式是presented here。

这是一个 .jar 包，如果你在 Unix 或 Linux 上，你必须 download 然后通过终端运行（我不知道 Windows，所以有人填补了这个空白！），语法如下：

$ java -jar /path/to/yuicompressor-x.y.z.jar myfile.css -o myfile-min.css

-o 选项声明您希望将缩小的内容写入哪个文件。

【讨论】：

YUI 不会按照 OP 的要求重写规则并组合类似的规则。它确实做了通用缩小（我只是在那里发明了一个词吗？），但这不是他问我是否理解正确的问题）......

irc 是正确的。这似乎只处理基本的优化，如空格和 cmets。如果您将 Java 的 bin 添加到 PATH，您在 Windows 上显示的命令也相同。如果不是，您必须在双引号中指定 exe 文件的完整路径 "C:\Program Files\Java\...\bin\java.exe" -jar ...

【参考方案9】：

你试过less.js 吗？ 您可以以面向对象的方式编写 css 代码，也可以在客户端或服务器端使用此框架，下面是您的案例演示：

/* you can write you desired css as follows */
body 
  &input 
        margin: 0;
  
  background:white;

会自动编译成：

body, input 
    margin:0;


body 
    background:white;

【讨论】：

到目前为止看起来不错，但我现在无法完全测试，因为为了输出纯 CSS，我必须使用 Node JS。使用浏览器似乎只是调用生成的 CSS 而没有实际将其输出到屏幕上。我最终会解决这个问题。

您可以使用 WinLESS/Less.app (Win/Mac) 查看存储 .less 文件的目录，而不是直接嵌入 less.js。它会自动为您将其转换为 .css（应用程序甚至应该有更好的压缩选项）

【参考方案10】：

那里有几个。其中一些是最好的；

http://refresh-sf.com/yui/

http://www.minifycss.com/css-compressor/

第二个将匹配在一起的规则分组，还有更多。

【参考方案11】：

CSSO 有点过时了，ACCSS 是 CSSO 的一个端口，但修复了原始代码的未解决问题。

https://github.com/acwtools/accss

而且它还具有更好的压缩比