2009.03.03

快速寫好 CSS 的 5 種方法

文章索引

這是翻譯自 NETTUTS 的文章，作者為Trevor Davis。其實他點出的這五點不能說是寫 css 的一種捷徑，但我認為就初學者而言，確實可以培養這種不錯的撰寫習慣。畢竟 css 的語法是死的，所以大家能推出的觀點就是針對撰寫習慣而言。當然以下五點都是很多 css designer 知道的事情，只是在於你要不要去實踐罷了。

原文出處：@ 5 Ways to Instantly Write Better CSS / Trevor Davis
譯者：@ muki / MUKI space*

CSS 重置

認真的聲明，一定要使用某些 css 重置的方法，無論你是用Eric Meyer Reset，YUI Reset，或者是你自己習慣的重置表，就是一定要使用。( muki 按：因為不同的瀏覽器對 css 的初始設定都有所不同，藉由 css 重置的設定，可以讓這些瀏覽器按照同樣的規則解讀 css ，而這張表就是 css reset )

它可以簡單移除元素中 margin 以及 padding :

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer 以及 YUI 所提供的重置表都很不錯，但對我來說他們太遙不可及了。我希望你可以重新定義每個元素的屬性，最後重置一切。這也是為什麼 Eric Meyer 建議，如果要更有效使用它，你就不應該直接拿他提供的重置表放入你自己的 css 裡頭。請調整它修改它，在基礎上重新建置它，並且把重置表變成你自己的。

喔，對了，停止使用這個語法吧：* { margin: 0; padding: 0; }

它被使用在太多地方了，你想想如果將一個單選按鈕(Radio Button) 的 padding 給移除會發生什麼事情？我們常利用表單元素做些華麗的效果，所以建議就讓他保持原狀吧。

照字母排序

一個小測試：
你覺得下面兩個例子中，哪一個例子可以最快找到 margin-right 的屬性值？

例 1：

div#header h1 {
  z-index: 101;
  color: #000;
  position: relative;
  line-height: 24px;
  margin-right: 48px;
  border-bottom: 1px solid #dedede;
  font-size: 18px;
}

例 2：

div#header h1 {
  border-bottom: 1px solid #dedede;
  color: #000;
  font-size: 18px;
  line-height: 24px;
  margin-right: 48px;
  position: relative;
  z-index: 101;
}

如果告訴我例 2 比較慢就該打屁股啦！藉由字母來排序你的 css 屬性，你所創立的連貫性會幫你減少尋找某個屬性的時間。

我知道有的人是用這種方法來排序，但有的人卻有另一套排序方法。不過在我的公司，我們一致決定要使用字母作為排序方式，假設你要和別人共同開發程式碼，這種方法對你會比較好。

組織化

建議你應該組織樣式表，這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋，舉例來說，以下是我替我的樣式表所做的結構：

/*****Reset*****/
移除元素裡的 margin 以及 padding

/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等等

/*****Generic Classes*****/
定義像是邊欄的浮動，移除元素底部的 margin 間距等單純的樣式
也許他們不像我們一般認知的語意化，但是他們對編碼的有效化是必要的。

/*****Basic Layout*****/
定義基本的模版: header, footer, 等等，元素可以幫助網站定義基本的圖層

/*****Header*****/
定義所有header的元素

/*****Content*****/
定義所有content的區塊內容

/*****Footer*****/
定義所有footer的元素

/*****Etc*****/
繼續一對一的定義其他部分

一致性

無論你用什麼方法定義你的程式碼，請繼續下去。我實在厭惡以及厭倦討論單行 vs. 多行的議題，這是無庸置疑的！每個人都有他們自己的主張，所以就選擇一種你覺得對的或習慣的方式保持下去吧。

就我而言，我通常是使用混合的方式，如果一個樣式超過三種屬性，我就會使用多行：

div#header {float: left; width: 100%;}
div#header div.column {
  border-right: 1px solid #ccc;
  float: rightright;
  margin-right: 50px;
  padding: 10px;
  width: 300px;
}

div#header h1 {float: left; position: relative; width: 250px;}

會用這種方式是因為我使用的編輯器在換行前，單獨一行正好能容納 3 種屬性。所以你就只要描繪好哪種方法最適合你，並且保持下去。