1. 不同瀏覽器元素的預設屬性有所不同，使用Reset可重置瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。/** 清除內外邊距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 結構元素 */dl, d...
1. 不同瀏覽器元素的預設屬性有所不同，使用Reset可重置瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
/* structural elements 結構元素 */
dl, dt, dd, ul, ol, li,
/* list elements 列表元素 */pre,
/* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea,
/* form elements 表單元素 */
th, td,
/* table elements 表格元素 */
img/* img elements 圖片元素 */
{ 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. 良好的命名習慣
3. 代碼縮寫
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
變成
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
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. 適當的代碼註釋
7. 給你的CSS代碼排序
如果代碼中的屬性都能按照字母排序，那查找修改的時候就能更加快速:
/*** 樣式屬性按字母排序 ***/
div{
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;
}
9. 選擇更優的樣式屬性值
CSS中有些屬性採用不同的屬性值，雖然達到的效果差不多，當性能上卻存在著差異，如
區別在於border:0把border設為0px，雖然在頁面上看不見，但按border預設值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了記憶體值。
而border:none把border設為“none”即沒有，瀏覽器解析“none”時將不作出渲染動作，即不會消耗記憶體值。所以建議使用border:none;
同樣的，display:none隱藏對象瀏覽器不作渲染，不占用記憶體。而visibility:hidden則會。
10. 使用<link>代替@import
首先，@import不屬於XHTML標簽，也不是Web標準的一部分，它對於較早期的瀏覽器相容也不高，並且對於網站的性能有某些負面的影響。具體可以參考《高性能網站設計：不要使用@import》。所以，請避免使用@import
11. 使用外部樣式表
這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部文件可以提高頁面速度，因為CSS文件都能在瀏覽器中產生緩存。內置在HTML文檔中的CSS則會在每次請求中隨HTML文檔重新下載。所以，在實際應用中，沒有必要把CSS代碼內置在HTML文檔中：
12. 避免使用CSS表達式（Expression）
CSS表達式是動態設置CSS屬性的強大（但危險）方法。
13. 代碼壓縮
當你決定把網站項目部署到網路上，那你就要考慮對CSS進行壓縮，出去註釋和空格，以使得網頁載入得更快。壓縮您的代碼，可以採用一些工具，如YUI Compressor
利用它可精簡CSS代碼，減少文件大小，以獲得更高的載入速度
