Css 書寫規範

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

以上就是Css 書寫規範的內容，更多相關文章請關注topic.alibabacloud.com（www.php.cn）！

