用CSS优化器缩小CSS

压缩CSS：提升网站速度的利器

核心要点：

• CSS压缩通过去除代码冗余字符来减小文件大小，从而加快下载速度并节省数据传输量。
• CSS Optimizer (CSSO) 是一款基于Node.js的压缩工具，需要熟悉命令行界面。
• CSSO不仅去除不必要的空格、分号和注释，还通过合并具有重复选择器的声明块、删除被覆盖的属性和缩短颜色代码等方式进行优化。
• 虽然压缩CSS可以提高网站性能，但也可能使代码难以阅读和调试。因此，建议保留原始未压缩的CSS文件以备开发之用。

(以下内容摘自Tiffany Brown撰写的《CSS大师》一书。该书在全球各地均有售，您也可以在此处购买电子书版本。)

开发者工具能帮助您查找和修复渲染问题，但效率如何呢？我们的文件大小是否已经最小化？为此，我们需要压缩工具。

在CSS的上下文中，压缩仅仅意味着去除多余的字符。例如，考虑以下代码块：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

这段代码包括换行符和空格在内，长度为98字节。让我们看看压缩后的示例：

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

现在我们的CSS只有80字节长，减少了18%。当然，字节越少，下载速度就越快，您和您的用户的数据传输量就越少。

在本节中，我们将介绍CSS Optimizer（CSSO），这是一个基于Node.js的压缩工具。要安装CSSO，您首先必须安装Node.js和NPM。NPM作为Node.js安装过程的一部分安装，因此您只需要安装一个包。

使用CSSO需要您熟悉命令行界面。Linux和OS X用户可以使用终端应用程序（对于OS X，应用程序>终端应用程序）。如果您使用的是Windows，请使用命令提示符。转到“开始”或Windows菜单，并在搜索框中键入cmd。

安装CSSO

设置好Node.js和NPM后，您可以安装CSSO。在命令行提示符下，键入：

npm install -g csso -g标志全局安装CSSO，以便我们可以在命令行中使用它。OS X和Linux用户可能需要使用sudo（sudo npm install -g csso）。当NPM将其安装路径打印到命令行窗口，并且命令行提示符重新出现时，您就知道它已安装成功，如图3.25所示。

图3.25. 使用Windows命令提示符安装CSSO

现在我们准备压缩CSS了。

使用CSSO压缩

要压缩CSS文件，请运行csso命令，并将文件名作为参数传递：

csso style.css 这将执行基本压缩。CSSO会去除不必要的空格、多余的分号以及CSS输入文件中的注释。

完成后，CSSO会将优化的CSS打印到标准输出，即当前的终端或命令提示符窗口。但是，在大多数情况下，我们希望将该输出保存到文件中。为此，将第二个参数传递给csso，即压缩文件的名称。例如，如果我们想将style.css的压缩版本保存为style.min.css，我们将使用以下命令：

csso style.css style.min.css 默认情况下，CSSO会重新排列CSS的部分内容。例如，它会合并具有重复选择器的声明块，并删除一些被覆盖的属性。考虑以下CSS：

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

h1 { color: #ff6600; }

在此代码段中，margin-left覆盖了之前的margin声明。我们还重复使用了h1作为连续声明块的选择器。优化和压缩后，我们得到：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

CSSO删除了多余的空格、换行符和分号，并将#ff6600缩短为#f60。CSSO还将margin和margin-left属性合并到一个声明中（margin: 20px 30px 20px 0），并将我们单独的h1选择器块组合成一个。现在，如果您怀疑CSSO将如何重写您的CSS，您可以禁用其重构功能。只需使用--restructure-off或-off标志即可。例如，运行csso style.css style.min.css -off将得到以下结果：

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

现在我们的CSS已压缩，但未优化。禁用重构将使您的CSS文件无法达到最小大小。除非遇到问题，否则避免禁用重构。第9章介绍的预处理器在其工具集中提供压缩功能；但是，使用CSSO可以进一步减少文件大小。

关于使用CSS Optimizer压缩CSS的常见问题

压缩CSS在Web开发中的重要性是什么？

压缩CSS是Web开发的一个重要方面，因为它有助于减小CSS文件的大小。文件大小的减小会导致网站加载速度更快，从而提供更好的用户体验。压缩后的CSS文件去除了不必要的字符，例如空格、换行符和注释，这些字符不会影响代码的功能。此过程可以显著提高网站的性能，尤其对于互联网连接较慢的用户而言。

CSS Optimizer如何工作？

CSS Optimizer通过分析您的CSS代码并去除不必要的字符和冗余来工作。它通过消除空格、换行符和注释以及简化代码结构来压缩CSS文件。这将导致文件大小更小，Web浏览器可以更快地下载，从而提高网站的整体性能。

压缩CSS有哪些风险？

虽然压缩CSS可以显着提高网站的性能，但需要注意的是，它也可能使代码更难阅读和调试。这是因为该过程去除了使代码易于阅读的所有格式和注释。因此，建议保留原始未压缩的CSS文件以用于调试和开发。

我可以手动压缩CSS吗？

是的，您可以通过删除所有不必要的字符和简化代码来手动压缩CSS。但是，这个过程可能非常耗时且容易出错，特别是对于较大的CSS文件而言。使用CSS Optimizer之类的工具可以自动化此过程，确保您的CSS能够准确有效地压缩。

如何使用CSS Optimizer？

要使用CSS Optimizer，您只需将CSS代码粘贴到CSS Optimizer网站上的输入字段中，然后单击“优化”按钮即可。然后，该工具将分析您的代码，并为您提供一个您可以复制并在网站中使用的压缩版本。

压缩CSS会影响我的网站的功能吗？

不会，压缩CSS不会影响您的网站的功能。该过程仅去除不必要的字符并简化代码，但不会更改浏览器解释CSS规则的方式。因此，您的网站的外观和功能将保持不变，但由于文件大小较小，加载速度会更快。

我可以将CSS Optimizer用于大型CSS文件吗？

是的，CSS Optimizer可以处理大型CSS文件。但是，文件越大，工具分析和压缩代码所需的时间就越长。尽管如此，对于大型CSS文件，使用CSS Optimizer仍然比尝试手动压缩代码更高效、更准确。

CSS Optimizer是否免费使用？

是的，CSS Optimizer是一个免费工具，您可以使用它来压缩CSS代码。它是一个基于Web的工具，因此您无需下载或安装任何内容即可使用它。您只需访问CSS Optimizer网站，粘贴您的CSS代码，即可获得压缩版本。

如果需要更改CSS，我可以反转此过程吗？

是的，您可以使用原始未压缩的CSS文件来反转此过程。这就是建议在压缩CSS之前保留原始CSS文件副本的原因。如果您需要更改或调试代码，可以使用原始文件，然后在完成后再次压缩它。

我可以将哪些其他实践与CSS压缩相结合以提高网站的性能？

除了压缩CSS之外，您还可以压缩HTML和JavaScript文件。这可以进一步减少网站的加载时间。其他实践包括优化图像、使用内容分发网络 (CDN)、启用压缩和实现浏览器缓存。这些实践与CSS压缩相结合，可以显着提高网站的性能和用户体验。

以上是用CSS优化器缩小CSS的详细内容。更多信息请关注PHP中文网其他相关文章！