分享 | 快速寫好CSS的5種方法
這次翻譯自NETTUTS的文章，作者為Trevor Davis。其實他點出的這五點不能說是寫css的一種捷徑，但我認為就初學者而言，確實可以培養這種不錯的撰寫習慣。畢竟css的語法是死的，所以大家能推出的觀點就是針對撰寫習慣而言。當然以下五點都是很多css designer知道的事情，只是在於你要不要去實踐罷了。
原文出處：
@ 5 Ways to Instantly Write Better CSS / Trevor Davis
譯者：
@ muki / MUKI space*
1.CSS重置
Photo by redux
認真的聲明，一定要使用某些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給移除會發生什麼事情？我們常利用表單元素做些華麗的效果，所以建議就讓他保持原狀吧。
2.照字母排序
Photo by kvh
一個小測試：
你覺得下面兩個例子中，哪一個例子可以最快找到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.組織化
Photo by allyaubryphotography
建議你應該組織樣式表，這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋，舉例來說，以下是我替我的樣式表所做的結構：
/*****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.一致性
Photo by sailor_coruscant
無論你用什麼方法定義你的程式碼，請繼續下去。我實在厭惡以及厭倦討論單行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.從對的地方開始
Photo by odolphie
在你寫好你的html標籤前，不要動你的樣式表！
當我準備做一個網站時，在寫css樣式表之前，我會先檢查<body>...</body>裡所有的標記語言，這時候我不會添加多餘的div，id，以及class。我只會加入基本的圖層像是header、content，footer，因為我知道這些東西是必須存在的。
透過標記後的文件，就會避免碰到多div症以及多class症，這些通常是致命的毛病。你只需要在開始寫css時，當你需要加入額外的效果時再加入他們即可。
有效的使用後代選擇器來定義你的子元素，不要自動給元素增加id和class。記住一點，如果一個文件沒有良好的格式標記，那這份css是毫無價值的。
*編輯註: 我必須要再強調這點，就像Trevor說的，在你還沒有100%標記好你的html時，請不要動css文件。
妳的圖片非常具有說明性XD！
好文章啊！多學習
好久沒來Muki這里了，剛才去某人的Blog轉轉，覺得那Theme特好看。一看頁腳，原來是Muki出品，哈哈。
這個Theme真好看
我以前做網站的時候很愛用div，後來發現是給自己找麻煩。忘記關閉整個就會跑掉。
我覺得你很厲害呢
年紀比我小
已經在翻譯文章了 orz
還有第六種!!!
花錢請小木幫忙弄，這樣也能快速生出CSS。XD
之前就有先看到這篇原文出處
但樓主翻譯的不錯
希望能翻一些國外不錯的文章
好文！收下囉！(啃食貌)
收整收整又可以出一本書囉！
感謝您讓我少花點力氣找回還給老師的東西^^
--
辦公室的大小事全至拆組達人
http://ieg.twbbs.org/
@rex6913
呵，不過圖片也不是我拍的阿，是直接從原文者那邊擷取過來的:P
@ Donald
哈，那還真巧。不過看到有人使用我的theme也很快樂呢
不過我自己的這個theme還要再改過，我到覺得有些雜亂
@ 藍兒
我到現在一直都很愛用div XD
但是我在寫的時候會先排版用好，而且會把頭尾都先括好，否則一堆真的很容易搞混
@ Arno Ruan
好阿，我等你付錢給我(笑
@ Frank Smile
謝謝你的誇獎，我到覺得自己的翻譯還有待加強。
不過我會努力的^^
@ koka
唉，我也老了啦(嘆
(糟糕！鋤田鋤到忘我了，在小木學園的課業已經快趕不上進度了..@_@)
想請問Muki：
如何自NETTUTS網站轉載文章，並且出現Trackbacks在該文章下方?
@konekoya
我好像直接將連結放過來而已...
如果他有提供trackback的位子，你就直接將連結複製到你引用的欄位即可。
來抓錯一下～
2. 照字母排列～你說，選例２會被打屁屁～
可是，那個那個…例２才有照字母順序耶，例１迷有～所以……是我會錯意嘛？哈
@ 朵兒
還沒好 嗚~~
嘻
我是寫說「說2慢的要打屁屁」<<<所以2才是快XD
你要怪作者講話幹麻拐彎抹角 哈