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

CSS學起來並不難，但在大型專案中，就變得難以管理，特別是不同的人在CSS書寫風格上稍有不同，團隊上就更加難以溝通，為此總結了一些如何實現高效整潔的CSS程式碼原則：

1. 使用Reset但並非全域Reset

不同瀏覽器元素的預設屬性有所不同，使用Reset可重設瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。但要注意的是，請不要使用全域Reset：

*{margin:0;padding:0; }    

這不僅因為它是緩慢和低效率的方法，而且還會導致一些不必要的元素也會重設了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。

/**清除內外邊距 **/

body, h1, h2, h3, h4, h5, h6, hr, p,

blockquote,/* structural elements 結構元素*/

blockquote,/* structural elements 結構元素*/

dd, ul, ol, li,/* list elements 列表元素*/

pre,/* text formatting elements 文字格式元素*/

form, fieldset, legend, button, input, textarea,/* form elements* formform */

th, td,/* table elements 表格元素*/

img/* img elements 圖片元素*/{

border:mediumnone;

margin:0pad？

/**設定預設字體 **/

body,button, input, select, textarea {

font:12px/1.5'宋體',tahoma, Srial,helvetica,sans-serif; }

h1, h2, h33 , 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; }

   

習慣

無疑亂七八糟或是無語義命名的程式碼，誰看了都會抓狂。就像這樣的程式碼：

.aaabb{margin:2px;color:red;}    

我想即使是初學者，也不至於會在實際專案中如此命名一個class，但有沒有想過這樣的程式碼同樣是很有問題的：

My name is Wiky

問題在於如果你需要把所有原本紅色的字體改成藍色，那修改後就樣式就會變成：

.red{color:bule;}    

這樣的命名就會很讓人費解，同樣的命名為.leftBar的側邊欄如果需要修改成右側邊欄也會很麻煩。所以，請不要用元素的特性（顏色，位置，大小等）來命名一個class或id，您可以選擇意義的命名如：#navigation{…}，.sidebar{…}，.postwrap{…}

這樣，無論你如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的連結。

另外還有一種情況，一些固定的樣式，定義後就不會修改的了，那你命名時就不用擔憂剛剛說的那種情況，如

.alignleft{float:left;margin- right:20px;}

 .alignright{float:right;text-align:right;margin-left:20px;}

 .clear{clear:both;text-indent:-9999pxx;那麼對於這樣一個段落

我是一個段落！

如果需要把這個段落由原先的左對齊修改為右對齊，那麼只需要修改它的className就為alignright就可以了。

3. 程式碼縮寫

CSS程式碼縮寫可以提高你寫程式碼的速度，精簡你的程式碼量。在CSS裡面有不少可以縮寫的屬性，包括margin，padding，border，font，background和顏色值等，如果您學會了代碼縮寫，原本這樣的代碼：

li{

 font-family: Arial,Helvetica,sans-serif;

 font-size:1.2em;

 line-height:1.4em;

 padding-top:5px;

🠎ppadppadleam;

 }

   

就可以縮寫為：

li{

 font:1.2em/1.4emtit,1.4emm-jser 5px;

 }

   

4. 利用CSS繼承

如果頁面中父元素的多個子元素使用相同的樣式，那麼最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你可以很好的維護你的程式碼，也可以減少程式碼量。那麼原本是這樣的程式碼：

#container li{font-family:Georgia,serif; }

 #container p{font-family:Georgia,serif; }

serif; }

   

就可以簡單寫成：

#container{font-family:Georgia,serif; }    

5. 使用多重選擇器他們有共同的樣式的話。這樣做不但程式碼簡潔且可為你節省時間和空間。如：

h1{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

 h2{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

🎠33{font -family:Arial,Helvetica,sans-serif;font-weight:normal; }

   

可以合併為:

h1, h2, h3{ font-family:Arial-family weight:normal; }

 以上就是高效整潔CSS程式碼原則（上）的內容，更多相關內容請關注PHP中文網（www.php.cn）！