13條Css 書寫規範，13條css書寫

13條Css 書寫規範，13條css書寫

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代碼，減少檔案大小，以獲得更高的載入速度