@import vs鏈接

Question

首先我知道標題說這是一個重複的問題，如問here，here和here。我在這個主題上閱讀的所有內容都已超過兩年。那段時間很多情況已經改變了，所以同樣的想法仍然是可取的？

下面是一個示例，我在樣式表中使用@import來引入我的重置CSS和其他幾種樣式。我應該從@import改爲<link>嗎？根據這article我應該使用鏈接。所以我問其他開發者，到目前爲止最好的方式是什麼（2011年8月25日）

Answer 1

如果在過去的一兩年內發生了什麼變化，我們仍然處理很多相同的問題瀏覽器，所以你不應該改變你的做法。

<link>在所有情況下優於@import，因爲後者會阻止並行下載，這意味着瀏覽器在開始下載其餘內容之前會等待導入的文件完成下載。

您可以在這裏非常詳細地看到這一點：

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

因此，雖然@import可能是方便，這是提供的一切。如果您真的想要利用快速加載時間，請使用最少數量的樣式表（大多數情況下可能是一個樣式表），使用有效的選擇器（通常的東西）編寫良好的CSS，縮小它並使用<link>標籤。

---

這將是一個評論，但它得到了太久：

而不是@import（我知道這是非常方便），你應該在文件合併成一個，當你的網站開始運行。無論如何，你不應該在這方面進行調整，並且有許多工具可以幫助縮小它。就個人而言，使用PHP，我有一個配置文件，在其中定義了寫入單獨CSS文件（我將在<link>標記中引用的那個文件）中的所有CSS文件，然後如果緩存版本是舊的（手動或自動確定），它會合並/縮小它們，並將內容寫入「緩存」文件，並返回一個時間戳查詢字符串以追加到CSS文件名，以強制重新下載。

如果您也使用PHP，我強烈推薦cssmin，它可以分析@import的樣式表，並將內容拖放到一個文件中，以及處理縮小的所有方面。