如何編寫高效率額css程式碼簡單介紹

antzone發表於2017-04-02
CSS

本章節就羅列一下在寫css程式碼中需要注意的事項，這些事項可以提高css程式碼的效能。

下面就進入正題，感興趣的朋友可以做一下參考:

一.把CSS放在HTML頁面頭部:

頁面的渲染需要在css程式碼完全載入完畢之後，所以需要將css程式碼放在網頁的頭部，能夠提高效率。

@import相當於把標籤放在頁面的底部，因此從優化效能的角度考慮，應避免使用@import。

二.儘可能少的使用CSS Expressions:

此表示式只有低版本的IE瀏覽器支援。

但是此表示式內部執行非常的繁瑣，並且進行頁面微小的調整或者操作都可能有大量的操作執行，所以效率不過。

三.儘可能簡寫屬性或者屬性值:

有血css屬性或者屬性值能夠實現簡寫，看如下程式碼:

[CSS] 純文字檢視 複製程式碼
color: #eebbcc;

上面程式碼可以簡寫如下:

[CSS] 純文字檢視 複製程式碼
color: #ebc;

儘量使用複合屬性的寫法，將程式碼合成一條:

[CSS] 純文字檢視 複製程式碼
margin-top:2px;   
margin-right:5px;   
margin-bottom:2em;   
margin-left:15px;

程式碼可以簡寫成如下形式:

[CSS] 純文字檢視 複製程式碼
margin:2px 5px 2em 15px;

儘量將重複的地方抽取出來，程式碼如下:

[CSS] 純文字檢視 複製程式碼
.class1{position: absolute; left: 20px; top: 30px;}   
.class2{position: absolute; left: 20px; top: 30px;}   
.class3{position: absolute; left: 20px; top: 30px;}   
.class4{position: absolute; left: 20px; top: 30px;}   
.class5{position: absolute; left: 20px; top: 30px;}   
.class6{position: absolute; left: 20px; top: 30px;}

提取如下:

[CSS] 純文字檢視 複製程式碼
.class1 ,.class2 ,.class3 ,.class4 ,.class5 ,.class6{   
  Position: absolute; left: 20px; top: 20px;   
 }

四.只是用小寫形式:

標籤和css程式碼都要使用小寫:

[HTML] 純文字檢視 複製程式碼
<A HREF="http://www.softwhy.com">螞蟻部落</A>

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<a href="http://www.softwhy.com">螞蟻部落</a>

五.使用HTML5文件型別:

使用HTML5文件型別，起碼能夠節省很多字元:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>

六.儘量少用HTML字元實體:

當然有些情況是無法避免的，這就沒辦法了。

關於HTML字元實體可以參閱HTML字元實體簡單介紹一章節。

七.使用語義化的id和class選擇器名稱:

使用語義化的選擇器名稱可以便於閱讀，對合作開發或者後續的修改都有很大的好處，例如:

[CSS] 純文字檢視 複製程式碼
.button-green {}
#login {}

八.將值是零的單位省略:

將0值單位省略，如下程式碼:

[CSS] 純文字檢視 複製程式碼
margin:0px;
/*修改為如下:*/
margin:0;

九.省略數字的起始0:

將數字的起始0省略，程式碼如下:

[CSS] 純文字檢視 複製程式碼
font-size:0.8em;  
/*修改為如下:*/
font-size:.8em;

十.慎重使用選擇器:

可能實現同樣的效果，執行效率可能會不同所以要謹慎使用選擇器。

相關內容可以參閱css選擇器的解析順序簡單介紹一章節。

相關文章