高效率整潔CSS代碼原則 (下)

6. 適當的程式碼註釋

程式碼註解可以讓別人更容易讀懂你的程式碼，且合理的組織程式碼註釋，可使得結構更加清晰。你可以選擇做的樣式表的開始加入目錄:

/*————————————
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
— ——————————– */

如此你程式碼的結構就一目了然，你可以輕鬆的查找和修改程式碼。

而對於程式碼的主內容，也應適當的加以劃分，甚至在有必要的地方在對程式碼加以註解說明，這樣也有利於團隊開發:

/*** 標題 ***/

/*** 內容 ***/

/*** 頁尾 ***/

/*** 樣式屬性依字母排序 ***/

#header{height:145px;position:relative; }

#header h1{width:324px;margin:45px0020px;float:left;height:72px;}

#

content{background:#fff;width:650px;float:left;min-height:600px;overflow:hidden;}

#content h1{color:#F00}/* 設定字型顏色*/

#content h1{color:#F00}/* 設定字型顏色*/

#contentcontent . {overflow:hidden; }

#content .recent{margin-bottom:20px;border-bottom:1pxsolid#f3f3f3;position:relative;overflow:hidden; }

  

#footer{clear:both;padding:50px5px0;overflow:hidden;}

#footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font-size:1.1emem;

7. 給你的CSS代碼排序

如果代碼中的屬性都能按照字母排序，那查找修改的時候就能更加快速:

/*** 每個樣式屬性寫一行 ***/

div{

background-color:#3399cc;

color:#666;

font:1.2em/1.4emArial,Helvetica,sans-serif;

height:300px; px5px;

width:30%;

z-index:10;

}

   

8. 保持CSS的可讀性

8. 保持CSS的可讀性

8。對於以下兩種情況，哪種可讀性較高，我想不言而明。

/*** 所有的樣式屬性寫在同一行 ***/

div{

background-color:#3399cc;

color:#666;

font:1.2em/1.4emial,#666;

font:1.2em/1。 height:300px;

margin:10px5px;

padding:5px010px5px;

width:30%;

z-index:10;width:30%;

div{ background-color:#3399cc;color:#666;font:1.2em/1.4emArial,Helvetica,sans-serif;height:300px;margin:10px5pxxpadding:5px010px5px;width:30%;

   

當對於一些樣式屬性較少的選擇器，我會寫到一行：

/*** 選擇器屬性少的寫在同一行 ***/

div{background-color:#3399cccc;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標準的一部分，它對於較早的瀏覽器兼容也不高，並且對於網站的性能有某些負面的影響。

11. 使用外部樣式表

這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部檔案可以提高頁面速度，因為CSS檔案都能在瀏覽器中產生快取。內建在HTML文件中的CSS則會在每次請求中隨HTML文件重新下載。所以，在實際應用中，沒有必要把CSS程式碼內建在HTML文件中：

#container{ .. }

#sidebar{ .. }

   

而是使用導入外部樣式表：

   

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中文網（www.php.cn）！