CSS內聯還是外聯？ 內聯PK外聯

現在是一個推崇結構，表現，行為想分離的時代，最大的好處就是維護起來比較簡單，方便，代碼重用。把CSS，JS寫在HTML裡，就像一個大雜燴，很難理解，可讀性差，檔案大，維護起來非常麻煩。

 

但是CSS到底是內聯還是外聯呢？我們只要分析它的特點就不難得出答案。

CSS內聯：就是把CSS放在HTML Head裡使用Style包圍。<style type="text/css"></style>

CSS外聯：就是把CSS放到一個單獨的檔案裡，然後在HTML通過調用。<link rel="stylesheet" type="text/css" href="">。

 

我們知道HTTP請求是比較昂貴的，CSS內聯的話肯定會更快，因為把CSS放到HTML檔案裡，這意味著減少了一次HTTP請求。而外聯的話就是 一次HTTP請求，但是可以緩衝，當瀏覽器載入過這個檔案時，第二次請求的時候是第緩衝裡讀取的，所以第二次請求時是很快的，外聯的CSS還可以重用代 碼。那到底是使用內聯還是外聯呢？這就要看需求，如果一個頁面不需要緩衝時，也就是這個頁面不太訪問，或者訪問不多的時候，比如註冊頁面，一般情況下人家 只會進入一次，不可能第次進入這個網站你都去註冊，那就另當別論了，這個頁面不需要緩衝，把CSS放在Head裡時可以縮短載入時間，提高使用者體驗。對於 經常訪問的頁面，外聯肯定是不二的選擇。

在一些大的網站，如：Google，Yahoo也可以看到把CSS寫在Head裡。對於結構表現行為分離的原則，我們對於CSS入在Head裡是可以接受的，只要不是寫在元素上面。