編寫出色的CSS代碼

CSS學起來並不難，但在大型項目中，就變得難以管理，特別是不同的人在CSS書寫風格上稍有不同，團隊上就更加難以溝通，為此總結了一些如何?高效整潔的CSS代碼原則：
1. 使用Reset但並非全域Reset
不同瀏覽器元素的預設屬性有所不同，使用Reset可重設瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。但需要注意的是，請不要使用全域Reset：
    *{ margin:0; padding:0; }
這不僅僅因為它是緩慢和低效率的方法，而且還會導致一些不必要的元素也重設了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的觀點相同，Reset並不是一成不變的，具體還需要根據項目的不同需求做適當的修改，以達到瀏覽器的相容和操作上的便利性。我使用的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. 良好的命名習慣
無疑亂七八糟或者無語義命名的代碼，誰看了都會抓狂。就像這樣的代碼：
    .aaabb{margin:2px;color:red;}  


我想即使是初學者，也不至於會在實際項目中如此命名一個class，但有沒有想過這樣的代碼同樣是很有問題的：
    <h1>My name is <span>Wiky</span></h1>
問題在於如果你需要把所有原本紅色的字型改成藍色，那修改後就樣式就會變成：