拆開你的 CSS 吧！

http://blog.roodo.com/jaceju/archives/79138.html

「CSS 設定一多，就很難找到自己要改的。」

你也有同感嗎？教你一個好方法，適用於目前主流的瀏覽器上，像是 IE 及 FireFox。

CSS 只能寫在一個檔案裡嗎？非也。在 CSS 裡有個好用的指令：@import ，可以讓我們引入外部 CSS 檔案。

你只要在主要的 CSS 檔案的最上方這樣寫：

@import url(外部 CSS 檔案路徑);

就可以了。不過一定要注意，@import 指令一定要寫在 body 標籤的 CSS 設定之前。

然後我們應該如何正確地拆開 CSS 呢？雖然 CSS 沒有強制性地規定我們如何拆解 CSS ，不過我倒是可以提供一些建議。

1. 主要的檔案只放置編排版面的 CSS ，而字型、背景等等的設定儘可能地放到其他檔案裡。
2. 每個主要區塊的 CSS 都將它存成一個檔案，而檔案裡面就可以放這些區塊的細部設定。
3. 檔案的命名請用英文字母、數字及底線組成，且儘可能地能夠望而生義。
4. 如果有多種版型，則可再利用 (Reuse) 的部份可以獨立成一個檔案。
5. 不同的媒體 (例如供印表用的 CSS 、螢幕顯示用的 CSS ) ，都應該建立一個檔案，以便管理。

完整範例如下：

@import url(banner.css);
@import url(content.css);
@import url(links.css);
@import url(common.css);
/* 其他的 CSS 檔 */

html, body {
/* ... */
}

/* 其他的設定 */

是的，馬上就去試試看吧。