原文出處：http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
參考翻譯：http://blog.mukispace.com/5-ways-write-better-css/
1.Reset
我們在編寫CSS時，一定要使用某些CSS重置的方法，無論你是用Eric Meyer Reset，YUI Reset，或者是你自己習慣的重置表，就是一定要使用，因為不同的瀏覽器對CSS預設的初始值都不相同，藉由CSS重置的設定，可以讓這些瀏覽器按照同樣的規則解讀CSS，可以大量減少之後針對瀏覽器不同，而做個別修改的時間。
它可以簡單移除元素中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; }
* { margin: 0; padding: 0; }
它被使用在太多地方了，你想想如果將一個單選按鈕(Radio Button)的padding給移除會發生什麼事情？
我們常利用表單元素做些華麗的效果，所以建議就讓他保持原狀吧。
2. Alphabetize
一個簡單的小測試：
你覺得下面兩個例子中，哪一個例子可以最快找到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;
}
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;
}
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. Organization
建議你應該組織樣式表，這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋，舉例來說，以下是我替我的樣式表所做的結構：
/*****Reset*****/
移除元素裡的margin以及padding
/*****Reset*****/
移除元素裡的margin以及padding
/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等等
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等等
/*****Generic Classes*****/
定義像是邊欄的浮動，移除元素底部的margin間距等單純的樣式
也許他們不像我們一般認知的語意化，但是他們對編碼的有效化是必要的。
定義像是邊欄的浮動，移除元素底部的margin間距等單純的樣式
也許他們不像我們一般認知的語意化，但是他們對編碼的有效化是必要的。
/*****Basic Layout*****/
定義基本的模版: header, footer, 等等，元素可以幫助網站定義基本的圖層
定義基本的模版: header, footer, 等等，元素可以幫助網站定義基本的圖層
/*****Header*****/
定義所有header的元素
定義所有header的元素
/*****Content*****/
定義所有content的區塊內容
定義所有content的區塊內容
/*****Footer*****/
定義所有footer的元素
定義所有footer的元素
/*****Etc*****/
繼續一對一的定義其他部分
繼續一對一的定義其他部分
4. Consistency
無論你用什麼方法定義你的程式碼，請繼續下去。我實在厭惡以及厭倦討論單行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; }
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. Start in the right place
在你寫好你的html標籤前，不要動你的樣式表！
當我準備做一個網站時，在寫css樣式表之前，我會先檢查<body>...</body>裡所有的標記語言，這時候我不會添加多餘的div，id，以及class。我只會加入基本的圖層像是header、content，footer，因為我知道這些東西是必須存在的。
透過標記後的文件，就會避免碰到多div症以及多class症，這些通常是致命的毛病。你只需要在開始寫css時，當你需要加入額外的效果時再加入他們即可。
有效的使用後代選擇器來定義你的子元素，不要自動給元素增加id和class。記住一點，如果一個文件沒有良好的格式標記，那這份css是毫無價值的。
*編輯註: 我必須要再強調這點，就像Trevor說的，在你還沒有100%標記好你的html時，請不要動css文件。
沒有留言:
張貼留言