近期分享樣式的人愈來愈多,但是在語法排置上,可能初學者沒辦法作到那麼好。
今天看到有人寫了一篇「10 CSS Tips You Might Not Have Know About」,所以想跟大家分享一下^________^
原文出處(Click),有興趣的人可以去仔細閱讀他的內文
我在這邊只翻譯出他的十個要點。
如果翻譯的不好,也歡迎大家指正修改喔~

1.Use a common naming system
在為所有css類別命名的時候,儘量使用大眾化的英文作命名。
例如 #header(我們都會知道他是頭的部分) #header_logo (是頭那邊logo的部分)..依此類推。

2.Document common colors in the CSS commenting
在css註解的地方,放上所有你使用過的色碼+顏色的標示
例如

/*
Colors:
Dark Red #7762b0
Royal Blue #88jb04
Purple #663300
*/

3.Comment, comment, comment!
隨時隨地都要為你的css加上註解

4.Check for closed element first when debugging
在找css的錯誤之前,請先檢查你的每個元素是否都有寫完整,是否都有用「{」、「}」包好

5.Use CSS shorthand when applicable
儘量把一長串的語法縮短
例如背景的語法可以寫成:
background: #fff url("image.gif") no-repeat top left
這些語法就完全包含了(background-color. background-image. background-repeat. background-position.)

6.If possible get content in place before you style
如果可以的話,在你寫css時,加上content語法,給每一段加個宣告。
如果不知道什麼是content效果
可以試著在你的css裡頭加入下面的語法測試看看喔

.內文標籤:before {
content:"大家好,我是大木XD";
}

7.Always declare margin and padding in block-level elements
只要是大區塊的元素,都請在裡頭優先宣告margin以及padding

8.Avoiding annoying border adjusts
避免太多不必要的border語法互相干擾,要作適當的取捨調整

9.Stuck? Confused? Chances are someone's come across the same thing. Google it
遇到問題卡住了,不知道該從何下手?可能已經有人遇到同樣情況並且也解決了,多去搜尋一下吧!!
(感謝MiLa提供翻譯^^)

10.Get the web dev. tool for FireFox
多使用FireFox的外掛工具:web developer (Click) 這個軟體來編輯css