為什麼在CSS中不要再使用@import，CSS再使用@import

為什麼在CSS中不要再使用@import，CSS再使用@import

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
為什麼在CSS中不要再使用@import

CSS裡 @import用法

引入CSS的方法有兩種，一種是@import，一種是link
@import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />
現在絕大部分的網站都採用後一種link方式，原因在於
@import先載入HTML，後載入CSS
link先載入CSS，後載入HTML。

所以前者載入網頁會出現令瀏覽者以外的格式，後者則是帶格式的載入網頁。
 
css中為何要把@import放在樣式表的最前面?

實際上，@import並不是一定要在最前面

W3C的CSS2.1標準中，對@import作了以下規定：
In CSS 2.1, any @import rules must precede all other rules (except the @charset rule,if present).
在CSS2.1中，任何@import命令必須放在所有其它語句之前（除了用到@charset時）。

而在CSS3標準中，則是這樣規定：
Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.
在樣式表中，任何@import命令必須緊跟在@charset命令之後（如果有的話），放在其它@命令和樣式語句之前。

還有，@import命令放在注釋之後同樣生效。你不需要知道為什麼，只要記住如果不這樣做@import就會失效就行了。假如你一定要追究為什麼要做這樣的硬性規定，我認為主要出於這樣的考慮：

<p id="intro" class="frame head">I'm just a <p> element used test specificity of selectors. So leave me alone!</p>

p#intro { font: italic 1em Candara, Arial, sans-serif; }
p.frame { font: bold 3em Arial, Helvetica, sans-serif; }
p { font: italic 2em Georgia, serif; }

你認為頁面最終會使用哪條規則的font樣式？是第一條p#intro。這裡涉及到一個優先順序(specificity)的問題：#id > .class > element(標籤名)。所以即便p{font}樣式出現在p#intro{font}和p.frame{}之後，最終被應用的還是p#intro{font}。而容易導致問題的是下一種情況：

p.head { font: italic 1em Candara, Arial, sans-serif; }
p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

這次你認為會使用哪條font樣式？是第二條p.frame。這裡涉及到cascading的問題。p.head的優先順序和p.frame的優先順序相同，但p.frame寫在p.head之後，按規則p.frame的font樣式會覆蓋p.head的font樣式。

在這種情況下，再允許把@import放在一堆樣式當中，到底@import引入的樣式表中有沒有會覆蓋當前樣式表的條目，諸如此類的判斷會更加困難。實際上，即便CSS標準裡沒有作這樣的規定，程式員也還是會這樣做，因為這樣可以減少很多不必要的麻煩。
參考資料：www.w3.org/...import...餘下全文>>