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将在您的终端窗口中显示一条消息。