瞭解CSS中的@import

咱們知道，css文件引入方式有兩種：
1. HTML中使用link標籤

<link rel="stylesheet" href="style.css" />

1. 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

<style type="text/css">
  .hd{
    color: orange;
  }
  @import "import.css";
</style>
...
<p class="hd">我是什麼顏色</p>

import.css

.hd{
    color: blue;
  }

測試發現，p的顏色並非import.css裏所定義的藍色，而是以前定義的橘黃色。打開網絡請求會發現沒有請求import.css文件，這正是由於，再次強調一遍，import規則必定要先於除了@charset的其餘任何CSS規則，因此須要將index.html改爲醬紫：

<style type="text/css">
  @import "import.css";
  .hd{
    color: orange;
  }
</style>
...
<p class="hd">我是什麼顏色</p>

這時候能看到import.css網絡請求，p的顏色爲橘黃色，覆蓋了import.css裏定義的藍色。

媒體查詢

@import和link同樣，一樣能夠定義媒體查詢(media queries)，咱們先看看link定義的方式：

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

接下來是@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影響頁面性能的地方主要體如今兩個方面：

1. 影響瀏覽器的並行下載
2. 多個@import致使下載順序紊亂

具體能夠看看高性能網站設計：不要使用@import這篇文章，這裏就很少說，看完後記得回來點個贊或收藏：）。