5个CSS优化技巧，帮助你加速网站CSS
你是否考虑过CSS文件的体积？如果网站的样式表过于冗杂，也会拖慢页面的加载速度。
诚然，CSS在页面加载中只占一小部分，但它却是浏览器最先加载和读取的内容之一，往往在CSS下载和解析完成之前，浏览器是不会开始渲染网页的。因此，CSS是必须要关注的问题之一，下面的5条建议可以帮助你优化网站CSS。
01.使用较浅的selector
也许你的父母告诉你内敛是人生美德，但对于CSS却不是这样。复杂的、层叠的、冗余的selector会让CSS样式表变得笨重不堪。来看看下面的这条selector：
nav ul li.nav-item实际写成这样就够了：
.nav-item浅层的selector不仅有利于缩减CSS文件的体积，也有利于让浏览器更快速地找到元素对应的样式以加快加载。浏览器读取selector采取的是由左到右的策略，因此selector的层数和复杂度将决定浏览器是否需要多次解析并重复解析某个元素的selector，以确认到底该如何渲染这个元素。在有经常需要reflow的DOM时，浅层的选择器也有助于让页面更流畅。
当然，尽可能使用浅层selector只是理想情况，并不意味着所有元素都应该只有一两层selector，多层的selector自有它优秀的复用特性，在书写代码时需要注意二者的平衡。
02.使用简写属性
尽管这貌似是个常识，但被人遗忘的频率却很高。比如，下面的写法属于比较复杂的：
font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;而实际上根本用不到这么多，你只需要简写为：
font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;font可以同时接受多个参数，从而实现简写属性，你只需要1行就可以完成原来很多行的工作。
在上述的案例中，我们仅通过这样的变化就节约了相当于长版本40%的字符量，也许读起来不如长代码更简单易懂，但随着逐渐熟悉这种写法也可以达到相同的效果。
当然，font不是唯一可以优化的属性，其他的比如margin也可以一次代替margin-left、margin-right等代码。和margin同样用法的还有padding，这些都已经被Mozilla Developer Network整理出来：https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties。
如果你需要在某种场合下覆盖一些代码，比如希望在大窗口下放大文字该怎么办呢？你可以单独使用font-size来覆盖font内的字符大小：
h1{
font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;
}
@media (min-width: 60rem){
h1{
font-size: 2rem;
}
}这样写不仅方便，而且具有灵活性。你可以在某些场合下单独修改字符的一些属性，而其他部分则可以复用基础设置，在实际应用中非常方便。
03.使用预加载提示功能
你可以在网页头部加入一行预加载提示，来告知你的浏览器优先加载CSS文件。实现的方法有两种，你可以在HTML的顶端加入<link>标签：
<link rel="preload" href="/css/styles.css" as="style">或者在服务器设置里加入HTTP头：
Link: </css/styles.css>; rel=preload; as=style不论你选择哪一种，都可以让浏览器优先加载位于/css/style.css的文件（请根据实际的文件路径调整）。使用HTTP头的方式更加合理，因为它将有助于浏览器更早注意到这条提示（而不是在读取主体HTML之后）。
另外，使用HTTP头实现预加载，可以在大部分服务器上启动HTTP推送事件。这将有助于在收到请求时，让指定资源被优先推送到客户端，并且在推送对象是CSS时，很多服务器有内置的专项优化。
在HTTP/1的服务器上服务器推送是不被支持的，但仍能实现预加载的效果。
04.使用csscss删除冗余
可以使用第三方CSS检查工具来帮助剔除冗余。这里我们介绍的是基于Ruby的csscss。
在Ruby下，可以通过以下指令安装：
gem install csscss安装完成后，你可以用以下代码进行CSS检查：
csscss -v styles.css然后会跳出类似这样的结果，告诉你哪些内容是重复使用的，比如：
{h1} AND {p} share 3 declarations
- color: #000
- line-height: 1.618
- margin: 0 0 1.5rem因此，你可以将二者合并起来：
h1, p{
color: #000;
line-height: 1.618;
margin: 0 0 1.5rem;
}在完成一个庞大的项目完成后，你可能通过此功能使得CSS被大大精简。你可以尝试—help命令来看看csscss有哪些其他功能。
05.使用cssnano进一步优化
在最后，你可以使用cssnano等工具来进一步优化。cssnano是一款基于node和PostCSS的工具，可以缩小CSS并进行针对性优化。你可以使用npm命令在系统上完成安装：
npm i -g cssnano-cli接下来使用这个命令来优化CSS：
cssnano styles.css optimized-styles.css如果你不喜欢每次都敲命令，那可以在gulp文件中让cssnano自动执行。以下是相应的代码：
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const buildCSS = ()=>{
return gulp.src("css/styles.css")
.pipe(postcss([cssnano()])
.pipe(gulp.dest("css/optimized"));
};
const watch = ()=>{
gulp.watch("css/styles.css", buildCSS);
};
exports.buildCSS = buildCSS;
exports.watch = watch;
</code>其中，任务buildCSS会读取你位于css/styles.css的文件，然后输出到css/optimized下。而任务watch则会在css/style.css被修改时自动启动buildCSS。
你可以在终端监控任务watch：
gulp watch使用类似的方法，你可以创建更完善的自动优化系统，比如处理其他相关CSS，构建Sass/Less文件，执行自动修复等等。
5 tips for super-fast CSS
