1.使用全域reset
不同瀏覽器元素的預設屬性有所不同，使用Reset可重設瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。但要注意的是，請不要使用全域Reset：
*{ margin:0; padding:0; }
　　這不僅因為它是緩慢和低效率的方法，而且還會導致一些不必要的元素也重置了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。 Reset並不是一成不變的，具體還需要根據專案的不同需求做適當的修改，以達到瀏覽器的相容和操作上的便利性。我使用的Reset如下:
/**清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote,
#dl, dt, dd, ul, ol, li,
pre,
form, fieldset, legend, button, input, textarea,
th, td,
img{
  border:medium none;##> #  margin: 0;
  padding: 0;
}
/**設定預設字體 **/
body,button, input, select, textarea {
  font: 12px/1.5 ,tahoma , Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/**重置列表元素 **/
ul, ol { list-style: none; }
/**重置超連結元素 **/
a { text-decoration: none; color:#333; }
a:hover { text-decoration: underline; color:#F40; }
/**重置圖片元素 **/
img{ border:0px;}
/**重置表格元素 * */
table { border-collapse: collapse; border-spacing: 0; }
2. 良好的命名習慣
　　無疑亂七八糟或無語義命名的程式碼，誰看了都會抓狂。就像這樣的程式碼：
.aaabb{margin:2px;color:red;}
　　我想即使是初學者，也不至於會在實際專案中如此命名一個class，但有沒有想過這樣的程式碼同樣是很有問題的：

My name is Wiky

　　」>Wiky
　　　　原本紅色的字體改成藍色，那修改後就樣式就會變成：
.red{color:bule;}
　　這樣的命名就會很讓人費解，同樣的命名為.leftBar的側邊欄如果需要修改成右側邊欄也會很麻煩。所以，請不要用元素的特性（顏色，位置，大小等）來命名一個class或id，您可以選擇意義的命名如：#navigation{...}，.sidebar{...}，.postwrap{ ...}
　　這樣，無論你如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的連結。
　　另外還有一種情況，一些固定的樣式，定義後就不會修改的了，那你命名時就不用擔憂剛剛說的那種情況，如
.alignleft{float:left;margin- right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
　　那麼對於這樣一個段落

我是一個段落！

　　如果需要把這個段落由原先的左對齊修改為右對齊，那麼只需要修改它的className就為alignright就可以了。
3. 程式碼縮寫
　　CSS程式碼縮寫可以提高你寫程式碼的速度，精簡你的程式碼量。在CSS裡面有不少可以縮寫的屬性，包括margin，padding，border，font，background和顏色值等，如果您學會了程式碼縮寫，原本這樣的程式碼：
li{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;# # -left:5px;
}
就可以縮寫為：
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
　　如果您想更了解這些屬性要怎麼縮寫，可以參考《常用CSS縮寫語法總結》。
4. 利用CSS繼承
　　如果頁面中父元素的多個子元素使用相同的樣式，那麼最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你可以很好的維護你的程式碼，也可以減少程式碼量。那麼本來是這樣的程式碼：
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia , serif; }
就可以簡寫成：
#container{ font-family:Georgia, serif; }
5. 使用多重選擇器
　　你可以合併多個CSS選擇器為一個，如果他們有共同的樣式的話。這樣做不但程式碼簡潔且可為你節省時間和空間。如：
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
可以合併為
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif ; font-weight:normal; }
6. 適當的程式碼註釋
程式碼註解可以讓別人更容易讀懂你的程式碼，且合理的組織程式碼註釋，可使得結構更加清晰。你可以選擇做的樣式表的開始添加目錄:
　　如此你程式碼的結構就一目了然，你可以容易的查找和修改程式碼。
　　而對於程式碼的主內容，也應適當的加以劃分，甚至在有必要的地方在對程式碼加以註解說明，這樣也有利於團隊開發:
/*** 標頭  ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}##/*** 內容 ***#/** /
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
##content h1{color:#F00}
#content .posts { overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** 頁尾 ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em ; }
7. 給你的CSS程式碼排序
如果程式碼中的屬性都能按照字母排序，那麼找修改的時候就能更快速:
/*** 樣式屬性依字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif height 300px; :10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}##[8. 維持CSS的可讀性
　　可讀的CSS將會使得更容易找到和修改樣式。對於以下兩種情況，哪種可讀性較高，我想不言而明。
/*** 每個樣式屬性寫一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans- serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
  # width:30%;##-1 #/*** 所有的樣式屬性寫在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
當對於一些樣式屬性較少的選擇器，我會寫到一行：
/*** 選擇器屬性少的寫在同一行 ***/
div{ background-color:#3399cc; color:#666;}
對於這個規則並非硬性規定，但無論您採用哪種寫法，我的建議是始終保持程式碼一致。屬性多的分行寫，屬性少於3個可以寫一行。
9. 選擇更優的樣式屬性值
　　CSS中有些屬性採用不同的屬性值，雖然達到的效果差不多，當性能上卻存在著差異，如
　　區別在於border:0把border設為0px，雖然在頁面上看不見，但按border預設值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。
　　而border:none把border設為「none」即沒有，瀏覽器解析「none」時將不作出渲染動作，即不會消耗記憶體值。所以建議使用border:none;
　　同樣的，display:none隱藏物件瀏覽器不作渲染，不佔用記憶體。而visibility:hidden則會。
10. 使用代替@import
首先，@import不屬於XHTML標籤，也不是Web標準的一部分，它對於較早的瀏覽器兼容也不高，並且對於網站的性能有某些負面的影響。具體可以參考《高效能網站設計：不要使用@import》。所以，請避免使用@import
11. 使用外部樣式表
　　這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部檔案可以提高頁面速度，因為CSS檔案都能在瀏覽器中產生快取。內建在HTML文件中的CSS則會在每次請求中隨HTML文件重新下載。所以，在實際應用中，沒有必要把CSS程式碼內建在HTML文件中：

或

而是使用< link>匯入外部樣式表：

12. 避免使用CSS表達式（Expression）
　　CSS表達式是動態設定CSS屬性的強大（但危險）方法。 Internet Explorer從第5個版本開始支援CSS表達式。在下面的範例中，使用CSS表達式可以實作隔一個小時切換一次背景顏色：
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
　　如上所示，expression中使用了JavaScript表達式。 CSS屬性是根據JavaScript表達式的計算結果來設定。
　　表達式的問題就在於它的計算頻率要比我們想像的多。不只是在頁面顯示和縮放時，就是在頁面滾動、甚至移動滑鼠時都會要重新計算一次。給CSS表達式增加一個計數器可以追蹤表達式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。
　　如果必須使用CSS表達式，一定要記住它們要計算成千上萬次並且可能會對你頁面的效能產生影響。所以，在非不得已，請避免使用CSS表達式。
13. 程式碼壓縮
　　當你決定把網站專案部署到網路上，那你就要考慮對CSS進行壓縮，出去註解和空格，以使得網頁載入得更快。壓縮您的程式碼，可以採用一些工具，如YUI Compressor
利用它可精簡CSS程式碼，減少檔案大小，以獲得更高的載入速度。

以上是必看高效整潔的CSS代碼原則的詳細內容。更多資訊請關注PHP中文網其他相關文章！