CSS中@import的问题

网上很多文章说不建议使用css的import，因为它相当于把CSS放到页面的最底部。

其实不然，想下原理就知道了，import会导致CSS不能并行下载，浏览器要先下载使用了import的css，解析完后才知道还有另外一个css需要下载，然后再去下载、解析，之后才去进行render的步骤，这样就会导致页面白屏时间加长了。

比如

[a.css]:

 

@import base.css

...

[a.html]

 

 

<link rel="stylesheet" href="a.css"> 

这样浏览器会先下载a.css，解析完后才知道还有base.css需要下载，然后再去下载base.css，再解析base.css，再去渲染页面，页面就会有一段时间的白屏。

 

所以建议<link>标签，让两个css可以并行下载：

 

<link rel="stylesheet" href="base.css"> 
<link rel="stylesheet" href="a.css"> 

但是，另外一种情况下我们是可以使用import的，比如使用预编译的时候，因为最终还是会编译生成一份CSS。

 

比如使用webpack进行模块化开发的时候：

[base.less]

 

@colorMain: #ff0;

...

[a.less]

 

 

#testa {
    color: @colorMain;
}

 

[b.less]

 

#testb {
    color: @colorMain;
}

 

最后用webpack的extract-text-webpack-plugin生成bundle.css，而base.less,a.less和b.less都已经被打包进去这bundle.css里面了，所以就不存在import的问题。

以上是模块化开发方式，方便模块的管理和需求的变更，比如做完页面后产品同学说这个颜色不行，统一都改成红色吧，这时只需要修改base.less里的@mainColor:red;然后重新编译一次就OK了。

但是，同时又抛出了另外一个问题，不知道大家发现没有，在以上生成的bundle.css文件中，包含了两份base.less。

所以要注意，base.less最好只包含LESS/SASS/STYLUS变量的定义，不要包含reset.css或者mixin等信息，避免重复。

 

==============

【冷知识学习网】

【用车养车有问题？找车多星】