241 月

CSS樣式架構[2] 全站共用型 (Common)：重置樣式與框架樣式

重置樣式 (reset.css)

為了統一所有瀏覽器內建值，避免hack寫不完，所以每一頁一定要引入重置樣式reset.css，現在最多人使用的reset有兩套，一套是Eric Meyer的版本，一套是YUI (Yahoo UI Library) 的版本。我們目前採取的是Eric Meyer的版本，不過有一個地方略有不同，我們把背景色設成透明的這項規則拿掉，因為在IE底下有些要用js去改變tr的背景顏色，會被這一條規則影響而無法運作。

相關參考內容：

Eric Meyer’s CSS Reset v1.0 Doesn’t Play Well With IE
CSS: Overcoming "background: transparent" In Internet Explorer
CSS Tools: Reset CSS(最後定案的版本，針對 blockquote 及 q 作了更新)
打造自己的reset.css
淘宝CSS框架研究（1）：Reset CSS（八卦篇）

框架樣式 (layout.css)

這支css的用途是在定義網頁的架構樣式，所以一些像font、color…等與結構無關的樣式設定，應該要避免設定在這支css內。

而在結構名稱上也有一個固定模式，在body底下分為header(天)、content-wrapper(內容)、footer(地)，如果是兩欄式的就在content-wrapper裡面再分為content-main(主要內容)、content-sidebar(內容邊欄)，如果是三欄式的就在content-wrapper裡面多加一個content-nav(內容導覽)，習慣上我們都把content-sidebar放在右邊，content-nav放左邊，不過還需要看欄位的重要性來定，與content-main關聯比較大的為content-nav，較common的為content-sidebar。

不管是兩欄式或是三欄式的結構，content-wrapper裡面的書寫順序應該以重要性去排列，最重要的寫在最前面，所以我們都是以content-main為第一優先，content-nav次之，content-sidebar排最後。

底下是兩欄式的結構示意圖：
注意最外層的#wrapper結構，一般為了加快網頁呈現的速度，建議非必要的話，是可以省略的。