快速寫好 CSS 的 5 種方法

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

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

1. CSS 重置

認真的聲明,一定要使用某些 css 重置的方法,無論你是用Eric Meyer ResetYUI 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 給移除會發生什麼事情?我們常利用表單元素做些華麗的效果,所以建議就讓他保持原狀吧。

2.照字母排序

一個小測試:
你覺得下面兩個例子中,哪一個例子可以最快找到 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 屬性,你所創立的連貫性會幫你減少尋找某個屬性的時間。

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

3.組織化

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

/*****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*****/
繼續一對一的定義其他部分

4.一致性

無論你用什麼方法定義你的程式碼,請繼續下去。我實在厭惡以及厭倦討論單行 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 種屬性。所以你就只要描繪好哪種方法最適合你,並且保持下去。

5.從對的地方開始

在你寫好你的 html 標籤前,不要動你的樣式表!

當我準備做一個網站時,在寫 css 樣式表之前,我會先檢查<body>...</body>裡所有的標記語言,這時候我不會添加多餘的 div ,id ,以及 class 。我只會加入基本的圖層像是 header, content, footer,因為我知道這些東西是必須存在的。

透過標記後的文件,就會避免碰到多 div 症以及多 class 症,這些通常是致命的毛病。你只需要在開始寫 css 時,當你需要加入額外的效果時再加入他們即可。

有效的使用後代選擇器來定義你的子元素,不要自動給元素增加 id 和 class 。記住一點,如果一個文件沒有良好的格式標記,那這份 css 是毫無價值的

(muki 註: 我必須要再強調這點,就像 Trevor 說的,在你還沒有 100% 標記好你的html時,請不要動 css 文件。)