CSS3已經開始被大家廣泛的運用到產品中的頁面代碼中去，CSS3帶來的革新式的變化我在這裡就不一一細說了。不過因為目前的CSS3還處在草案階段，所以絕大部分的瀏覽器(除了opera應該是)都是使用的私有屬性的方式來實現對CSS3的支持。比如firefox的-moz-前綴和webkit核心瀏覽器的-webkit-前綴等。
整潔優雅的代碼能提高生產效率，特別是在團隊合作中。我想很多人都習慣把css代碼寫成一行的形式，諸如這樣：
.main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left;} .sidebar ul li{float:left} |
採用這樣的一行形式，能讓你們整齊的排列相似父輩繼承的樣式，讓他們很簡單的能被查找到。當然為了更好的查找到代碼，你們可能還需要一個注釋。
/* something u want to say --------------------------------------------------*/ .main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left;} .sidebar ul li{float:left} |
然後這時候我們想給sidebar加一個5像素的圓角，於是
/* sidebar border-radius {3px} --------------------------------------------------*/ .main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;} .sidebar ul li{float:left} |
這樣你可能還不會覺得有什麼，因為只是加了border-radius，如果我們繼續加個box-shadow呢？
/* sidebar border-radius {3px} --------------------------------------------------*/ .main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:1px 1px 5px #rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);-webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);} .sidebar ul li{float:left} |
是不是看起來挺崩潰的，這不是坑爹么…sidebar的樣式看起來糊成一團了，這些css3代碼和普通的css代碼混在一起十分難受…
於是這樣同樣有代碼潔癖的老外童鞋給出了一種他的解決方案，請看
/* sidebar border-radius {3px} --------------------------------------------------*/ .main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:1px 1px 5px #rgba(0,0,0,0.1); -moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1); -webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1); } .sidebar ul li{float:left} |
這樣來區分開css3代碼是不是整潔多了！
引申話題，該同學blog底部還就css3的樣式順序發表了觀點，到底是私有屬性-moz-border-radius放前面還是標準的border-radius放前面，這裡有一篇來自CSS3-TRICKS的《Ordering CSS3 Properties》闡述了為什麼私有屬性要放在標準的前面，把標準的放在最底下。
那麼最終的代碼就是這個樣子的
/* sidebar border-radius {3px} --------------------------------------------------*/ .main{width:960px;margin:0 auto;} .sidebar{width:233px;float:left; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1); -webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1); box-shadow:1px 1px 5px #rgba(0,0,0,0.1); } .sidebar ul li{float:left} |
不知道大家有沒有什麼不同的代碼書寫風格，希望能在評論中得到不同的見地。
PS:為什麼我不喜歡把每個樣式都單獨分成一行？因為…我覺得這樣的代碼可讀性真是太差了，試想，一個類樣式佔了10多行…
坑爹了！
為什麼不選擇對css源文件進行壓縮再發布呢？
可以關注下 yui compressor
@chone …明顯你會錯意思了，發布是發布，這個是開發時候寫的代碼
@Leeiio
源代碼我使用每個屬性一行
我的習慣是一行一個屬性，css2 和 css3一視同仁
ps. 似有 -》 私有
@任平生 感謝指正錯別字哈
@任平生 我喜歡把私有屬性寫在 JS 里輸出，你懂的
@萬戈 萬一用戶禁了js呢…
@MOPVHS 禁用JS，那多無趣呀，我無視這樣的訪客，哈哈
好文，我現在是CSS3的另起一行，內容合併，沒額外縮進。CSS3屬性多了的話依舊挺亂的。
我接受不了把全部寫在一行，一定要分行寫，不然我會吐血的。。：（
@Sam 每個樣式分一行我也嘗試過，現在放棄了
@Sam sam啊，我覺得分行寫看起來更讓我吐血，特別是樣式多起來的時候，查找一個屬性都要翻幾行。
~_~都是看著手冊複製的~~
Pingback: Tweets that mention 書寫整潔優雅的CSS3代碼 - Leeiio Chaos Made. -- Topsy.com
我一般是這樣排的，高寬相關在同一行，邊框相關在同一行，內容相關在同一行，定位相關在同一行，css3里的同一功能不同瀏覽器的在同一行，我覺得這樣比較便於查找
=.= 每個屬性一行，懶得區分 是不是 CSS3 了、、
我會這樣：
.sidebar{ width:233px; float:left;
-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
-moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
-webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
}
屬性之間空格隔開。
一行太長的話，進行分組分行
相近的只要不是太長就寫在一行
我習慣一行一行來，看起來比較清晰，好維護。
我也來找個錯別字「於是這樣同樣…」 ➡ 「這位同樣」
我現在基本就按照推薦的方法寫
學習了！很好的方法！
一條屬性一行。
這樣我感覺我在找屬性時比較方便。
滾動條用得少，直接用firebug看line num，然後VIM直接 ：line num
#el {
border: 1px solid red;
}
我要嚴格按照這種風格寫，不然看著很不清爽。
至於滾動條，我想可以分為好幾個文件寫，
打包的時候合併文件就好了。
border屬性前有個tab縮進的。
我是每個屬性一行來寫，因為我使用的DW，所以寫得差不多的時候使用DW的「命令 – 應用源格式」，就能把代碼都自動調整為一行的。之後再要修改，靠Firebug讀行號，也不麻煩。
🙂 這樣的書寫方式確實很棒!
每個屬性一行
並且依照 Alphabetical 做排序（好處是不會重複、團隊開發容易遵循）
滾動條的問題…
一個 CSS 文檔是一個 DIV 模塊，所以通常不會超過 100 行、還可以接受
另外就算不是一個 CSS 一個文檔，編輯器也可以設定適當的收摺。
@josephj 模塊化來分割css文件確實是有必要的，但是對於css的屬性順序採用 Alphabetical 其實我覺得不太好，這個只是解決了查看的問題，Mozilla不是有個書寫順序么，我覺得按那個來不錯，形象符合瀏覽器的渲染過程
我是把css3這些私有的扔到一起……
主題也太牛了吧，邊欄也能關閉，^_^
@異度空間 一般一般
我一直覺得應該把私有屬性放最後的
.main{width:960px;margin:0 auto;}
像這樣多些幾個屬性就會看得眼花…
.main
{
width:960px;
margin:0 auto;
}
習慣這樣了…然後用搜索找~~
我一直覺得這些法不錯，但是還是有點複雜，看老外寫的都挺簡單。
我也一直嘗試著使用老外的這種寫法，比較規範。
你是一邊看我的代碼一邊寫的文章吧？
我覺得不管怎麼寫，第一點要保證便於日後維護
@chatry 博主這個獲取用戶瀏覽器和操作系統的功能貌似有問題。。我是chrome11，WIN7系統