了解CSS中的@import

luxixing 发布于2019-08-28 17:52 / 3316人阅读

摘要：坑爹呢，看了一大堆，结果告诉我不要使用这也只是个建议，因为的确会带来一些问题，所以网络上会有各种抵制的文章，既然设计了，总有它的有用之处，不能过于绝对。

我们知道，css文件引入方式有两种：
1. HTML中使用link标签

CSS中@import

@import "style.css";

第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所忽略。这篇文章就详细解剖之。

语法

@import语法有两种：

@import "style.css";
@import url("style.css");

这两种语法并没什么差别。

规则

MDN中这么描述@import：

  The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

注意到加粗的部分么——import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html

...

我是什么颜色

import.css

  .hd{
    color: blue;
  }

测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：

...

我是什么颜色

这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。

媒体查询

@import和link一样，同样可以定义媒体查询(media queries)，我们先看看link定义的方式：

接下来是@import：

@import url("print.css") print;
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation:landscape);
@import url("mobile.css") (max-width: 680px);

这里要注意的是，不论是link还是import方式，会下载所有css文件，然后根据媒体去应用css样式，而不是根据媒体去选择性下载css文件。

不要使用@import

这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。使用@import影响页面性能的地方主要体现在两个方面：

影响浏览器的并行下载

多个@import导致下载顺序紊乱

具体可以看看高性能网站设计：不要使用@import这篇文章，这里就不多说，看完后记得回来点个赞或收藏：）。

云服务器 GPU云服务器 important Imports Importer import

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110851.html

了解CSS中的@import

摘要：坑爹呢，看了一大堆，结果告诉我不要使用这也只是个建议，因为的确会带来一些问题，所以网络上会有各种抵制的文章，既然设计了，总有它的有用之处，不能过于绝对。我们知道，css文件引入方式有两种： 1. HTML中使用link标签 CSS中@import @import style.css; 第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所...

FrancisSoung 2019-08-01 14:35 评论0 收藏0
link和@import的区别浅析

摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...

YFan 2019-08-29 16:19 评论0 收藏0
link和@import的区别浅析

摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...

cgh1999520 2019-08-23 10:53 评论0 收藏0
Sass快速入门学习笔记

摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属...

appetizerio 2019-04-23 13:44 评论0 收藏0