css优化

1，shallow selector：使用浅层选择器。比如nav ul li .nav-item可以直接换成 .nav-item。浏览器读取css样式是从右到左，层级越深，所耗费的时间就越多。

2，shorthand properties:属性简写。比如{

font-size:1.5rem;

line-height:1.618;

font-family:sans-serif;

}

可写成：font:1.5rem/1.618,sans-serif;

3，preload resource hint：预加载

<link rel='preload' href="/css/styles.css" as="style">

4,cull redundancies with csscss:使用csscss剔除冗余样式

使用方法如下：npm/gem install csscss -g

5,go the extra mile with cssnano:使用cssnano优化css

使用方法如下：npm i -g cssnano-cli

cssnano style.css(源文件) optimized-style.css(优化后的输出文件)