CSS调试和优化：使用CSSO进行压缩

The following introduction to CSS minification tools is an extract from Tiffany’s new book, CSS Master, 2nd Edition.

以下CSS缩小工具简介摘录自Tiffany的新书CSS Master，第二版 。

On your road to becoming a CSS master, you’ll need to know how to troubleshoot and optimize your CSS. How do you diagnose and fix rendering problems? How do you ensure that your CSS creates no performance lags for end users? And how do you ensure code quality?

在成为CSS大师的过程中，您需要了解如何对CSS进行故障排除和优化。 您如何诊断和修复渲染问题？ 您如何确保CSS对最终用户不会造成性能延迟？ 以及如何确保代码质量？

Knowing which tools to use will help you ensure that your front end works well. In this article, we’ll discuss CSS minification.

知道使用哪种工具将帮助您确保前端正常运行。 在本文中，我们将讨论CSS缩小。

Developer tools help you find and fix rendering issues, but what about efficiency? Are our file sizes as small as they can be? For that, we need minification tools.

开发人员工具可帮助您发现并解决渲染问题，但是效率如何？ 我们的文件大小是否尽可能小？ 为此，我们需要缩小工具。

Minification in the context of CSS simply means “removing excess characters.” Consider, for example, this block of code:

在CSS上下文中， 缩小是指“删除多余的字符”。 例如，考虑以下代码块：

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

That’s 98 bytes long, including line breaks and spaces. Let’s look at a minified example:

这是98个字节长，包括换行符和空格。 让我们看一个缩小的示例：

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

Now our CSS is only 80 bytes long—an 18% reduction. Fewer bytes, of course, means faster download times and data transfer savings for you and your users.

现在，我们CSS只有80个字节长，减少了18％。 当然，更少的字节意味着为您和您的用户缩短下载时间并节省数据传输。

In this article, we’ll look at CSS Optimizer, or CSSO, a minification tool that runs on Node.js. To install CSSO, you’ll first have to install Node.js and npm. npm is installed as part of the Node.js installation process, so you’ll only need to install one package.

在本文中，我们将研究CSS优化器或CSSO，它是在Node.js上运行的缩小工具。 要安装CSSO，首先必须安装Node.js和npm。 npm是Node.js安装过程的一部分，因此您只需要安装一个软件包即可。

Using CSSO does require you to be comfortable using the command-line interface. Linux and macOS users can use the Terminal application (Applications > Terminal.app for macOS). If you’re using Windows, utilize the command prompt. Go to the Start or Windows menu and type cmd in the search box.

使用CSSO确实需要您习惯使用命令行界面。 Linux和macOS用户可以使用终端应用程序(macOS的应用程序> Terminal.app )。 如果您使用的是Windows，请使用命令提示符。 转到“ 开始”或“ Windows”菜单，然后在搜索框中键入cmd 。

安装CSSO (Installing CSSO)

Once you’ve set up Node.js and npm, you can install CSSO. In the command line, type:

设置Node.js和npm后，就可以安装CSSO。 在命令行中，输入：

npm install -g csso

The -g flag installs CSSO globally so that we can use it from the command line. npm will print a message to your terminal window when installation is complete.

-g标志在全局安装CSSO，以便我们可以从命令行使用它。 安装完成后，npm将在您的终端窗口中显示一条消息。

Installing CSSO with npm using macOS 使用macOS使用npm安装CSSO

Now we’re ready to minify our CSS.

现在我们准备缩小CSS。

使用CSSO缩小 (Minification with CSSO)

To minify CSS files, run the csso command, passing the name of a file as an argument:

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

csso style.css

This will perform basic compression. CSSO strips unneeded whitespace, removes superfluous semicolons, and deletes comments from your CSS input file.

这将执行基本压缩。 CSSO去除不需要的空格，删除多余的分号，并从CSS输入文件中删除注释。

Once complete, CSSO will print the optimized CSS to standard output, meaning the current terminal or command prompt window. In most cases, however, we’ll want to save that output to a file. To do that, pass a second argument to csso—the name of the minified file. For example, if we wanted to save the minified version of style.css as style.min.css, we’d use the following:

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

csso style.css style.min.css

By default, CSSO will rearrange parts of your CSS. It will, for example, merge declaration blocks with duplicated selectors and remove some overridden properties. Consider the following CSS:

默认情况下，CSSO将重新排列CSS的各个部分。 例如，它将合并具有重复选择器的声明块，并删除一些覆盖的属性。 考虑以下CSS：

body { margin: 20px 30px; padding: 100px; margin-left: 0px; } h1 { font: 200 36px / 1.5 sans-serif; } h1 { color: #ff6600; }

In this snippet, margin-left overrides the earlier margin declaration. We’ve also repeated h1 as a selector for consecutive declaration blocks. After optimization and minification, we end up with this:

在此代码段中， margin-left会覆盖之前的margin声明。 我们还重复了h1作为连续声明块的选择器。 经过优化和缩小之后，我们得出以下结论：

body{padding:100px;margin:20px 30px 20px 0}h1{font:200 36px/1.5 ➥ sans-serif;color:#f60}

CSSO removed extraneous spaces, line breaks, and semicolons, and shortened #ff6600 to #f60. CSSO also merged the margin and margin-left properties into one declaration (margin: 20px 30px 20px 0) and combined our separate h1 selector blocks into one.

CSSO删除了多余的空格，换行符和分号，并将#ff6600缩短为#f60 。 CSSO还将margin和margin-left属性合并为一个声明( margin: 20px 30px 20px 0 )，并将我们单独的h1选择器块合并为一个。

If you’re skeptical of how CSSO will rewrite your CSS, you can disable its restructuring features. Just use the --restructure-off or -off flags. For example, running csso style.css style.min.css -off gives us the following:

如果您对CSSO如何重写CSS持怀疑态度，则可以禁用其重组功能。 只需使用--restructure-off或-off标志。 例如，运行csso style.css style.min.css -off可提供以下内容：

body{margin:20px 30px;padding:100px;margin-left:0}h1{font:200 36px/ ➥1.5 sans-serif}h1{color:#f60}

Now our CSS is minified, but not optimized. Disabling restructuring will keep your CSS files from being as small as they could be. Avoid disabling restructuring unless you encounter a problem.

现在，我们CSS已缩小，但尚未优化。 禁用重组将使CSS文件尽可能小。 除非遇到问题，否则请避免禁用重组。

Preprocessors and post-processors (such as Sass, Less and PostCSS) offer minification as part of their toolset. However, using CSSO can shave additional bytes from your file sizes.

预处理器和后处理器(例如Sass，Less和PostCSS)将缩小化作为其工具集的一部分。 但是，使用CSSO可以从文件大小中省掉更多字节。

To read more on CSS debugging and optimization, check out Tiffany’s book, CSS Master, 2nd Edition.

要了解有关CSS调试和优化的更多信息，请查阅Tiffany的书CSS Master，第二版 。

Related articles:

相关文章：

CSS Debugging and Optimization: Code-quality Tools

CSS调试和优化：代码质量工具

CSS Debugging and Optimization: Browser-based Developer Tools

CSS调试和优化：基于浏览器的开发人员工具

翻译自: https://www.sitepoint.com/css-debugging-and-optimization-minification-csso/