了解CSS中的@import

FrancisSoung 發(fā)布于2019-08-01 14:35 / 1933人閱讀

摘要：坑爹呢，看了一大堆，結(jié)果告訴我不要使用這也只是個(gè)建議，因?yàn)榈拇_會帶來一些問題，所以網(wǎng)絡(luò)上會有各種抵制的文章，既然設(shè)計(jì)了，總有它的有用之處，不能過于絕對。

我們知道，css文件引入方式有兩種：
1. HTML中使用link標(biāo)簽

CSS中@import

@import "style.css";

第一種方式最為常見最為主流，第二種方式則很少見到有人這么寫，因而也常被開發(fā)工程師所忽略。這篇文章就詳細(xì)解剖之。

語法

@import語法有兩種：

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

這兩種語法并沒什么差別。

規(guī)則

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規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，這句話是什么意思呢，我們看個(gè)例子：

index.html

...

我是什么顏色

import.css

  .hd{
    color: blue;
  }

測試發(fā)現(xiàn)，p的顏色并不是import.css里所定義的藍(lán)色，而是之前定義的橘黃色。打開網(wǎng)絡(luò)請求會發(fā)現(xiàn)沒有請求import.css文件，這正是因?yàn)椋俅螐?qiáng)調(diào)一遍，import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，所以需要將index.html改成醬紫：

...

我是什么顏色

這時(shí)候能看到import.css網(wǎng)絡(luò)請求，p的顏色為橘黃色，覆蓋了import.css里定義的藍(lán)色。

媒體查詢

@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文件，然后根據(jù)媒體去應(yīng)用css樣式，而不是根據(jù)媒體去選擇性下載css文件。

不要使用@import

這。。坑爹呢，看了一大堆，結(jié)果告訴我不要使用！
這也只是個(gè)建議，因?yàn)閕mport的確會帶來一些問題，所以網(wǎng)絡(luò)上會有各種「抵制@import」的文章，既然設(shè)計(jì)了@import，總有它的有用之處，不能過于絕對。使用@import影響頁面性能的地方主要體現(xiàn)在兩個(gè)方面：

影響瀏覽器的并行下載

多個(gè)@import導(dǎo)致下載順序紊亂

具體可以看看高性能網(wǎng)站設(shè)計(jì)：不要使用@import這篇文章，這里就不多說，看完后記得回來點(diǎn)個(gè)贊或收藏：）。