在成为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还将marginmargin-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可以从文件大小中减去额外的字节数。