Tips to Code Better CSS in your Projects
今天在整理資料的時候發現這篇文章，覺得很不錯所以想跟大家分享~ 不過礙於他是英文，所以我很好心的幫大家寫出重點(兼練英文XD)
- 使用有意義的Class名稱
作者在這邊舉了一個例子：當你用leftContent跟rightContent來命名兩欄式版型的左右欄，而客戶要求要把左右換過來，這時你就囧啦~因為換過來就不符合語意了，最好是用mainContent(主要)跟secondaryContent(次要)來做分別。(另外就是也不要用顏色當Class名稱，哪天顏色一改就又不合語意了) - 不要用ID命名，只用Class
這個大家應該都曉得，為了不要造成跟javaScript命名衝突的可能 ，另外也不建議div.className這種寫法，直接寫成.className即可，才能在所有的標籤都能用到這個class - 善用繼承的屬性
作者舉了<table>的例子，我們常常為了美化表格把奇跟偶數行用兩個背景色分開，所以每個<tr>都要下Class，但其實只要在tbody設奇數行的底色，只要偶數行再下Class。(現在有些瀏覽器可以用語法分辨奇偶行數，但不是所有的瀏覽器所以還是用這個方法吧~詳情請看 CSS to select the even and odd elements) - 命名空間 Namespacing
運用繼承的關係來寫CSS，如.widget裡面的h3，寫成.widget h3{….}，或是.widget .title{…..}之類的，此方法可以避免想名稱想破頭還有避免牽扯到其他的樣式 - 不需要把網頁調到所有瀏覽器每pixel都長一樣
如果只是因為他不支援圓角，你就要針對不支援圓角的瀏覽器做背景圖，其實沒有那個必要 - 避免使用不必要的Class跟Div
讓你的每個Div跟Class都要有使用上的意義，不要用Div去包<ul>，直接在<ul>上面就可以加Class了 - 避免使用行內樣式
讓你的文章更容易維護，更容易再利用(就是少加<span><font>之類的東西) - Avoid Hacking your Code
這一段我看不太懂，總之就是叫大家避免用In-CSS Hack而改用Conditional comments，這兩個東西的差異在CSS Hacks這篇文章有寫到。(感謝Lozen Lin的指正，關於Conditional comments的的用法也可參考這裡) - CSS重置
記得都要Reset CSS，作者推薦這兩種給大家使用 Eric Meyer’s CSS Reset or YUI 3: CSS Reset
- 運用CSS Framework
就是像960grid這樣的東西啦~另外還有 YUI, Blueprint, Elastic, YAML等等 - 為你的CSS下註解
否則幾個月後你或別人都看不懂當初在寫瞎毀 - 使用縮寫
像是
background:url(bg.jpg) #fff no-repeat top left;
padding:10px 0 5px 20px;
border: 1px solid #000;
減少檔案的大小，更容易閱讀 - 固定CSS的寫法
不管是喜歡通通寫成一行，或者是斷行+空格排整齊，或是混著用，整個專案都要用同一種方法來寫CSS，所以請挑選你覺得最方便舒適的寫法 - 尋找重複的樣式
寫完後回頭檢視你的CSS是否有重複的樣式可以寫在一起 - 運用Sprites
(Sprites就是把icon或按鈕等元素集中在同一張圖，用background-position去定位)好處就是在讀取網頁時減少向伺服器Request的次數 - Object Oriented CSS
這裡介紹Nicole Sullivan的 OO CSS，把CSS當作樂高來去做思考，讓CSS可以拆開又重組，挺有趣的概念! - 跟著大師學習
作者推薦了幾個CSS大師供大家參考，Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, and a bunch of sites
- CSS驗證
寫完之後對你的CSS進行驗證，可以到線上的W3C CSS驗證服務做檢測，你會發現很多意想不到的錯誤 - 壓縮CSS檔案
要上傳之前，先用Online YUI Compressor把你的空格跟註解刪除，此舉大概能減少40%的檔案大小
Connie C. Khan
I really appreciate this post. I?