問題描述

對于@import，都不推薦使用

<style>@import xxx</style>

因為即便在頭部書寫，也會在頁面結(jié)構(gòu)被渲染后才加載css，造成頁面的可能無樣式的尷尬。

因此如果用sass的話，多個scss文件，通過一個main.scss @import之后編譯成css再在html中引入就不會出現(xiàn)這樣的問題。

那我想問的是，如果不使用sass，如果有多個css文件，在main.css中這樣寫：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);@import url('normalize.css');@import url('grid.css');@import url('modal.css');

然后在index.html中引入：

<link rel=stylesheet href='http://www.lshqa.cn/wenda/css/main.css'>

可以在瀏覽器中看到：main.css是優(yōu)先于其他三個樣式加載的，并沒有以我們期望的方式按@import順序加載，但整個頁面顯示卻不會有任何的問題，請問是為什么？用鏈接唯一css文件，并且采用@import在css文件中引入其他模塊css這種方式可取嗎？

問題解答

不可取. @import 進來的樣式在頁面內(nèi)容載入完畢后再加載, 如果網(wǎng)速慢, 頁面可能閃爍, 故不推薦使用. 相對于這種方式, 如果要加載許多獨立的CSS文件, 建議直接用 link[rel=stylesheet] 加載.

如果CSS內(nèi)容不是很多, 還是(按需)合并到一個文件里比較好, 減少請求.

你以為瀏覽器傻？肯定有優(yōu)化，以前的IE6也許是你想的那樣

首先感謝您的邀請，但我不是高手。我的理解是，就好比外鏈CSS和行內(nèi)CSS，你說誰的層級優(yōu)先?只是個人的理解。至于對不對，請自行百度

第一個問題，main.css優(yōu)先于其他的幾個被@import的樣式，這是正常的，也是應(yīng)該的，相當(dāng)于main.css是入口，其他的樣式都是被它關(guān)聯(lián)引入的。題主覺得這種會有問題可能是覺得css也和js一樣有那種執(zhí)行先后的順序從而影響優(yōu)先級關(guān)系，但實際上，瀏覽器只會在css全部加載完畢后，將樣式去應(yīng)用到dom樹里，這個時候的優(yōu)先級關(guān)系是真實參照css代碼的寫法及引入順序的。

第二個問題，這個方式是可用的。本身@import的寫法只在舊版本的IE（8-）中存在加載速率低下的問題，而現(xiàn)代瀏覽器已經(jīng)都有了很好的優(yōu)化，所以不再需要擔(dān)心。不過，題主仍然需要注意的是，每一個@import都會產(chǎn)生一個新的http請求，從性能優(yōu)化的角度上說，仍然是像題主說的sass那樣，適當(dāng)減少http請求數(shù)，直接把代碼合在少量文件內(nèi)，會比較利于網(wǎng)站更快加載。