CSS教程：CSSO调试和优化

　　在变成CSS高手的路面上，您必须了解怎样故障检测并提升CSS。您怎样确诊和修补3D渲染难题?您怎样保证您的CSS不容易为终端用户建立特性落后?您怎样保证 编码品质?

　　掌握应用什么专用工具将协助您保证 前面运作优良。在文中中，大家将探讨Minification with CSSO。

　　开发者专用工具可协助您搜索和修补3D渲染难题，但高效率又怎样呢?大家的图片大小是不是尽量小?因此，大家必须变小专用工具。

　　在CSS的前后文中变小仅仅代表着“删掉不必要的标识符。”比如，考虑到这一代码块：

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

　　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.appfor macOS)。假如您应用的是Windows，请应用cmd。转到“逐渐”或“Windows”莱单，随后输入cmd输入框。

　　安裝CSSO

　　一旦设定了Node.js和npm，就可以安裝CSSO了。在cmd中，输入：npm install -g csso

　　该-g标示在全局性安裝CSSO，便于我们可以从cmd应用它。安裝进行后，npm将在终端窗口中打印出一条信息。

　　应用macOS应用npm安装CSSO

　　如今大家提前准备变小大家的CSS。

　　CSSO变小

　　要变小CSS文档，请运作该csso指令，将文件夹名称做为参数传递：csso style.css

　　这将实行基本上缩小。CSSO删掉不用的空格符，删掉不必要的分号，并从CSS键入文档中删掉注解。

　　进行后，CSSO会将提升的CSS打印出到规范輸出，即当今终端设备或cmd对话框。可是，在大部分状况下，我们要将该輸出储存到文档中。因此，将第二个参数传递给csso变小文档的名字。比如，如果我们想储存as的变小版本号，大家将应用以下几点：style.cssstyle.min.css

　　csso style.css style.min.css

　　默认设置状况下，CSSO将重新排序CSS的一部分內容。比如，它将应用反复的选择符合拼申明块并删掉一些调用的​​特性。考虑到下列CSS：

　　body { margin: 20px 30px; padding: 100px; margin-left: 1080x;}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:20px30px20px0h1

　　假如您对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文档尽量小。除非是碰到难题，否则请防止禁止使用资产重组。

　　预CPU和后CPU(如Sass，Less和PostCSS)将变小做为其工具箱的一部分。可是，应用CSSO能够从图片大小中减掉附加的字节。