問(wèn)題描述

對(duì)于@import，都不推薦使用

<style>@import xxx</style>

因?yàn)榧幢阍陬^部書(shū)寫(xiě)，也會(huì)在頁(yè)面結(jié)構(gòu)被渲染后才加載css，造成頁(yè)面的可能無(wú)樣式的尷尬。

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

那我想問(wèn)的是，如果不使用sass，如果有多個(gè)css文件，在main.css中這樣寫(xiě)：

@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.aoyou183.cn/wenda/css/main.css'>

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

問(wèn)題解答

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

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

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

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

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

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