css @import url加载样式应用深入分析
我要评论一直以来写CSS的时候都没有过多的考虑使用@import的方式，最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式。其实对于这个问题在很早以前网络上就有相关的资料做了介绍这篇《don’t use @import》，英文的哦 (^。^)y-~~ ，不过不用担心，前端观察站点上有中文的翻译 《高性能网站设计：不要使用@import》，同时在蓝色理想论坛上也有相关的讨论《@import 调用样式表的优势是什么呢？》，这个帖子的讨论是在2010年3月份的，大家可以看看。
为什么大家会关注这个@import呢，或许是因为它也是可以让页面加载样式，而且XHTML标签中<link />标签也是把我们的外部样式加载到页面中，于是就有朋友得到“不知道如何选择”的选择性综合症了。( # ▽ # )
咱也不是啥权威机构，更不是啥权威人士，但手中有权威指南和CSS手册，翻开查阅，发现这两样法宝上面提到的内容大致是相同的，简单概括一下：
@import像link一样，链接一个外部样式表到文档；
@import会影响到一些低端的浏览器（这个低端相信大家都懂，比如IE4，呃，不知道现在还有人在用这个没 -_”）；
@import必须是在<style>标签内，或者一个CSS文件中，并且是要在样式定义之前使用；
导入的外部样式定义会被文档中的定义覆盖（这个也就是加载顺序的东西了）；
可以在加载样式的同时定义为哪些设备显示，这个跟link方式是一样的；
这么一点概括内容如果有遗漏的大家继续补充一下哈。 < (￣︶￣)>
我的废话似乎多了一点，入正题，先看一下平时大家对于@import方式聊得最多的一个话题，加载顺序。既然有加载顺序，那么就肯定会有demo啦，主要的文件和代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>诡异的@import</title>
<link rel="stylesheet" href="link_a.css" media="screen" />
<style type="text/css">
@import url(import_b.css);
</style>
<link rel="stylesheet" href="link_b.css" media="screen" />
</head>
<body>
<p class="linxz">ctrip.com linxz</p>
</body>
</html>
link_a.css
@charset "utf-8";
@import url(import_a.css);/*===== 红色 =====*/.linxz {color:#FF0000;}
import_a.css
@charset "utf-8";/*===== 绿色 =====*/.linxz {color:#00FF00;}
link_b.css
@charset "utf-8";/*===== 蓝色 =====*/.linxz {color:#0000FF;}
import_b.css
@charset "utf-8"; /*===== 黑色 =====*/.linxz {color:#000000;}
有了代码，然后这个时候不知道大家有没有兴趣猜一下页面最终显示的是什么颜色的文字呢。我是没兴趣，至于你们信不信我不知道，反正我信了。所以我直接看最终的页面效果，别惊讶，颜色都是一样的。
效果是一样了，但问题也跟着来了，就是大家所说的使用@import方式导入样式之后，会出现闪屏的情况，如果网速过慢样式过大导致页面被渲染延迟。这个情况到目前为止我似乎还真没碰到过，谁让我平时写页面的时候都是用link方式引入样式文件呢，罪过啊罪过，各位看官如果有兴趣的话，请自行尝试，这个不在本次测试范围内，但我相信这是有证可寻的。回归话题，目前这四个样式文件在各个浏览器中出现的情况是怎么样的呢，看下面的截图：
嗯，大概瞄了一下，似乎每个浏览器的表现还是存在着不少的差异，import_a.css和import_b.css出现的位置几乎没几个是相同的，再来一个图，这样或许会看得清晰一点，看不清楚那只能说明我不做设计是对的，看清楚的话，或许我可以考虑转行去做设计了。
回顾一下前面代码中需要注意的几点：
import_a.css这个文件是从link_a.css中@import进去的；
import_b.css这个是在link_b.css之前的<style>标签导入的；
页面中可以看到三个样式文件顺序是link_a.css、import_b.css、link_b.css；
再回到刚看到的页面加载瀑布流图中，我们可以发现import_a.css这个鸟货始终不在一个位置，不是在最后就是在前面一点，比较会倒腾啊；import_b.css这个文件也不赖，位置也是常变化。
import_a.css的位置变化
| IE 6 | IE 7 | IE 8 | FirFox 8 | Safari 4 | Chrome 15 | Opera 11.11 |
|---|---|---|---|---|---|---|
| 在link_a.css加载之后立即加载import_a.css | 在所有的link加载之后开始加载import_a.css | 将页面中的出现的三个样式按出现的次序引入加载完之后，加载link_a.css中的import_a.css | 在将页面中的link加载完之后，再加载页面中的@import，最后按照link中出现的@import加载样式 | 同IE 7 | 同IE 8 | 同FireFox 8 |
嗯，import_a.css作为存放在CSS样式文件中导入的代表，表现的让人有点迷糊，搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了，如果不是根据@import出现的位置来加载样式，那么就是在link的样式文件加载完之后开始加载@import的样式（这个时候或许就是在页面dom全部加载完之后再加载样式的关键了，不过目前我现在测试的demo中并没有更多的加载元素，有兴趣的同学要不试试看？）
以上的一些内容主要描述的一点就是@import出现的方式不同，也间接着影响着页面加载次序。但无论是怎么样的一个加载情况，最终被浏览器解析后的渲染页面的样式情况十分一致，也就是为什么我们看到页面效果是一致的关键因素了。
嗯，终于把这篇内容写完了，不晓得这个东西大家能否理解，写在最后就一句话：@import导入的样式虽然会影响页面加载的瀑布流，但是不会影响CSS对页面的渲染结果；对页面渲染结构有影响的仅仅只是CSS出现的位置。
想到一点，其实对于@import这个东西可以在项目前期的时候将页面分割成多个模块，然后通过@import导入样式，这样便于管理和维护，最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并，将@import的样式直接引入到样式文件中，目前我知道的工具有鬼哥的mergeCSS和涛~哥的CSSgaga（这个东西我具体没用过，但听说可以，如果不可以的话，别拿鸡蛋砸我，直接拿鸡蛋给我，我做蛋饼吃。）
相关文章
- link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别。下面脚本之家小编给大家介绍CSS中link和@import的区别说明，感兴趣的朋友一起看下吧2016-08-12
- 下面小编就为大家带来一篇浅谈CSS 权值 层叠 重要性(!important)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-05
- 这篇文章主要介绍了CSS中的@import,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-14
- !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级，下面对它的用法做下总结2014-08-08
- 这篇文章主要介绍了加了important标记css样式的jQuery写法，需要的朋友可以参考下2014-07-16
- 使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug2014-06-05
- 本文章详细的介绍了关于link和@import的区别，有需要了解的朋友可以参考一下本文章2012-03-31
- 我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识2010-06-17
- 很多人，包括很多网站（我所见过的所有网站，包括国内著名的‘网页设计师’网站），都说important是不被IE所支持和认识的，可是真的是这样吗？看了下边的两个例子，也许你2010-01-05
Webpack 中 css import 使用 alias 相对路径的方法
在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使2018-07-24
最新评论