在成为CSS大师的道路上，您需要知道如何排除故障并优化CSS。您如何诊断和修复渲染问题？您如何确保您的CSS不会为最终用户创建性能滞后？您如何确保代码质量？

了解使用哪些工具将帮助您确保前端运行良好。在本文中，我们将讨论Minification with CSSO。

开发人员工具可帮助您查找和修复渲染问题，但效率又如何呢？我们的文件大小是否尽可能小？为此，我们需要缩小工具。

在CSS的上下文中缩小只是意味着“删除多余的字符。”例如，考虑这个代码块：

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

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

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

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

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

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

安装CSSO

一旦设置了Node.js和npm，就可以安装CSSO了。在命令行中，键入：npm install -g csso

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

使用macOS使用npm安装CSSO

现在我们准备缩小我们的CSS。

CSSO缩小

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

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

完成后，CSSO会将优化的CSS打印到标准输出，即当前终端或命令提示符窗口。但是，在大多数情况下，我们要将该输出保存到文件中。为此，将第二个参数传递给csso缩小文件的名称。例如，如果我们想保存as 的缩小版本，我们将使用以下内容：style.cssstyle.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

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

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

如果您对CSSO如何重写CSS持怀疑态度，可以禁用其重构功能。只需使用–restructure-off或-off标志。例如，running 给出了以下内容：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}

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

预处理器和后处理器（如Sass，Less和PostCSS）将缩小作为其工具集的一部分。但是，使用CSSO可以从文件大小中减去额外的字节数。