如何缩小我的 CSS？ [复制]答案

【问题标题】：How can I minify my CSS? [duplicate]如何缩小我的 CSS？ [复制]
【发布时间】：2011-09-18 09:10:53
【问题描述】：

可能重复：
Any recommendations for a CSS minifier?

我有一个相当大的 CSS 文件。有没有什么软件可以让文件变小，加载速度更快？还有我可以做些什么来增加我的 CSS 被浏览器缓存的机会吗？

【问题讨论】：

希望您已经明显删除了不必要的重复设置？例如，将最常见的设置与 body 标签相关联？

标签： jquery html css

【解决方案1】：

您可以使用 CSS 缩小器或压缩器来最小化您的 CSS。这个问题的答案将为您解决：

What are some good css and js minimizers for production code?

至于缓存，当然文件越小越好。您还可以设置服务器发送的 EXPIRES HEADERS。雅虎在这里有一些信息：

http://developer.yahoo.com/performance/rules.html

【讨论】：

抱歉，您能告诉我如何设置过期标头吗？
第二个链接将帮助您入门。这将取决于您正在运行的服务器类型。

【解决方案2】：

是的！这称为 css 压缩/缩小。在我看来，这是最好的压缩器：https://csscompressor.net/ 粘贴到你的 CSS 中，它就会被压缩。此外，请确保您在 HTML 中使用尽可能少的选择器，查看是否可以组合它们并删除不需要的属性。使用此代码设置默认值，因此您不必在主 css 文件的最顶部写入每个选择器。完成后，通过将其添加到站点根目录中的 .htaccess 文件中来缓存和压缩 CSS。

#GZIP ----------------------------
AddOutputFilterByType DEFLATE text/css

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include filee \.(html?|txt|css|js|php)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<ifmodule mod_php4.c>
    php_value zlib.output_compression 16386
</ifmodule>

#CACHE ----------------------------

<ifModule mod_headers.c>
  <filesMatch "\\.(css)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
</ifModule>
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 604800 seconds"
</ifModule>

这应该缓存并使您的 css 尽可能小。这是我在我的网站上使用的，在连接良好的情况下，缓存后的加载时间不到 1 秒！

【讨论】：

【解决方案3】：

您可以使用CSS Minifier。

这必须在服务器端完成才能有用。

您还应该使用某种形式的缓存控制；例如，发送很远的到期标头并将最后修改时间作为 GET 参数附加到文件中。这样，当您更新文件时，客户端的浏览器就会下载它。如果您不修改它，您的最终用户只会下载一次（直到到期）。

【讨论】：