高效CSS開發核心要點

姬光發表於2012-05-03
CSS

本文參考了業界規範及主流趨勢，詳盡整理了CSS開發中需要注意的要點以及關乎效能的一些問題，希望對您有所幫助，也可收藏作為參考。

1. 基本原則

1.1 把CSS放在HTML頁面頭部

由於瀏覽器需要在所有的樣式表載入完成後才能開始渲染頁面，樣式表載入完成之前頁面會一直顯示空白，因此需要將樣式表放在頭部。

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

1.2 避免使用 CSS Expressions

Expression 只有 IE 支援，而且他的執行比大多數人想象的要頻繁的多。不僅頁面渲染和改變大小 (resize) 時會執行，頁面滾動 (scroll) 時也會執行，甚至連滑鼠在頁面上滑動時都會執行。在 expression 裡面加上一個計數器就會知道，expression 的執行上相當頻繁的。滑鼠的滾動很容易就會使 expression 的執行次數超過 10000。

1.3 CSS簡寫

1.3.1 16進位制顏色值簡寫 

/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;

1.3.2 屬性值簡寫 

 margin-top: 2px;
 margin-right: 5px;
 margin-bottom: 2em;
 margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px; 

 border-width: 1px;
 border-style: solid;
 border-color: #000     ----->>     border: 1px solid #000 

 font-style: italic;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 1em;
 line-height: 140%;
 font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 

 background-color: #f00;
 background-image: url(background.gif);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 

 list-style-type: square;
 list-style-position: inside;
 list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)

1.4 儘量抽取相似部分

.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;} 

 -------------------->>>>>>> 

 .class1 .class2 .class3 .class4 .class5 .class6{
        Position: absolute; left: 20px; top: 20px;
 }

2. 關鍵要點

2.1 只使用小寫

<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<img src="google.png" alt="Google">

2.2 不要有多餘的空格（劃線處）

<!-- Not recommended -->
<p>What?_

<!-- Recommended -->
<p>Yes please.

2.3 使用utf8編碼

html中：
<meta charset="utf-8"> 

css中：
@charset "utf-8";

2.4 使用html5文件型別

<!DOCTYPE html>

2.5 驗證HTML與CSS文件

驗證HTML

驗證CSS

2.6 使文件語義化

<!-- Not recommended -->
<div onclick="goToRecommendations();"<All recommendations</div<

<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

2.7 多媒體（多終端）相容

<!-- Not recommended -->
<img src="spreadsheet.png">

<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

2.8 不要使用實體引用

<!-- Not recommended -->
The currency symbol for the Euro is “&eur;”.

<!-- Recommended -->
The currency symbol for the Euro is “€”.

2.9 使用帶有語義的id和class

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

2.10 省略零值的單位

margin: 0;
padding: 0;

2.11 省略起始的零

font-size: .8em;

2.12 儘量避免CSS hacks

嘗試換種解決方案

2.13 為末尾的宣告新增分號

儘管省略末尾分號可以省略一個位元組，但是非常不利於團隊維護，得不償失 

/* Not recommended */
.test {
  display: block;
  height: 100px
}

/* Recommended */
.test {
  display: block;
  height: 100px;
}

2.14 選擇器的效率

瀏覽器是“從右往左”來分析 class 的，對於下面的規則 

#god > li {font-weight: bold}

瀏覽器會先查詢頁面上所有的“li”節點，然後再去做進一步的判斷：如果它的父節點的 id 為“god”，則匹配成功。由此可知，CSS 選擇器的匹配遠比我們想象的要慢的多，CSS 的效能問題不容忽視。

2.15 後代選擇器

#toc li {font-weight: bold}

這個效率比之前的“child selector”效率更慢，而且要慢很多。瀏覽器先便利所有的“li”節點，然後步步上溯其父節點，直到 DOM 結構的根節點（document），如果有某個節點的 id 為“toc”，則匹配成功，否則繼續查詢下一個“li”節點。

2.16 儘量避免全域性選擇器

[hidden="true"] { ... } /* A universal rule */

這裡的匹配規則很明顯：查詢頁面上的所有節點，如果有節點存在“hidden”屬性，並且其屬性值為“true”，則匹配成功。這是最耗時耗力的匹配，頁面上的所有節點都需要進行匹配運算，這種規則應儘量避免。

是用星號也一樣 

#god li *

先找到頁面上的所有元素，再匹配祖先中包含li的元素，然後在這些元素中再查詢父元素的id為god的元素。

因此，對於全域性選擇器，只建議一種用法： 

* { margin: 0; padding: 0; /* etc. */ }

2.17 避免tag+id或者class+id

button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon

2.18 關於tag+class

button.indented {...}----->>.button-indented {...}

程式設計師們經常會給某個 Class 前面加上標籤名稱（Tag Name），以更精確且快速的定位該節點，但是這樣往往效率更差。因為頁面上的 class 在全域性範圍內來講應該是唯一的，用唯一的 Class 名稱來定位一個節點往往比組合定位更加快捷。事實上，這種做法也可以避免由於開發修改頁面元素的型別（Tag）而導致的樣式失效的情況，做到樣式與元素的分離，兩者獨立維護。

2.19 儘量減少規則數量

可以考慮將層級關係寫到一個class中，不過在層級變動時就比較麻煩了 

Span[mailfolder="true"] > table > tr > td.columnClass {...} 

------------------->>>>>>> 

.span-mailfolder-tbl-tdCol {...}

2.20 避免過長的class命名

可以考慮縮寫 

ocHeroImage
ocEmailAddress

如果覺得難以理解，可以加入連字元或註釋 

oc-HeroImage
oc-EmailAddress

儘管有語義化方面的考慮，但命名還是儘量短一些，只要易於辨認即可 

heroImg
emailAddr

2.21 檔名中不應有空格

a) 有空格的檔名會被Google當成兩個關鍵字，可能帶來更多的搜尋結果，引來更多流量，是好事
b) 有空格意味著不能省略引號，多了兩個位元組
c) 空格會被瀏覽器自動轉換為%20，老的瀏覽器可能不支援，如果將%20硬編碼到URL中則每個例項中都多了兩個字元 

input {background: url("/images/shadow background.gif");}

2.22 省略URI的引號

@import url(//www.google.com/css/go.css);

2.23 儘量避免後代選擇器

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 選擇器是耗時相對高的選擇器，通常來講，它在 CSS 裡的使用應該是儘量避免的，如果能用 child 選擇器替代就應該儘量這樣去做。

2.24 充分利用繼承機制

 Color
 font
 letter-spacing
 line-height
 list-style
 text-align
 text-indent
 text-transform
 white-space
 word-spacing 

 #bookmark  > .menu-left {list-style-image: url(blah)} 

 ------------>>>>>>>> 

 #bookmark  {list-style-image: url(blah)}

2.25 釋出之前一定要進行壓縮

可使用YUI Compressor或類似軟體進行壓縮後再發布。

3. 高階技巧

3.1 省略嵌入資源的協議

即可避免混合內容問題（mixed content issues）也可以縮減檔案大小 

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

3.2 省略可選的標籤

HTML5規範中指定了一些可以省略的標籤，可以縮減檔案大小 

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

3.3 檔案結構

由於影像等資源一般只有CSS檔案使用，故可將影像資料夾放到CSS檔案同級目錄，這樣就可使用相對路徑，節省位元組數 

input {background: url("images/shadow background.gif");}

3.4 資料夾命名

通常資料夾會被命名為其所代表的資源的複數形式 

images
assets
fonts

其實大可不必，使用單數形式可以節省許多位元組，尤其是當每個專案的結構都類似時 

img
asset
font

對於下面一段包含58位元組的程式碼： 

input {background: url("/images/shadow background.gif");}

優化後變為52位元組，即10%的壓縮： 

input {background: url(img/shadow-background.gif);}

如果在使用縮寫，則可進一步縮減： 

input {background: url(img/shadow-bg.gif);}

如果一個專案有幾百行這樣的程式碼，那麼就會節省幾百位元組了。如果站點訪問量超大，則可節省數目客觀的頻寬資源。

3.5 末尾宣告的分號

前面提過，去掉末尾宣告的分號可以節省位元組，但不利於維護。可以考慮在壓縮釋出階段去掉。 

.clear {clear:both;}

.clear {clear:both}

3.6 背景色簡寫

背景色簡寫也可節省位元組，但要慎用，因為省略掉的預設屬性會覆蓋前面的屬性。 

background-color: blue;

background: blue;

3.7 濾鏡簡寫

selector {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
}

filter的版本是IE8以下的，–ms-filter的版本是IE9以上的，YUI會將其壓縮為： 

selector {
        -ms-filter:"alpha(opacity=65)";
        filter:alpha(opacity=65);
}

由於YUI的廣泛使用極其社群開發著的強大力量，說明這種寫法已經是經過深度測試的寫法，可以放心使用。

3.8 Gzip壓縮與CSS書寫

Goolge建議按照字母順序書寫CSS規則，方便維護。其他公司也有自己的規範。從Gzip壓縮角度，只要整個文件中的書寫順序保持一致即可，可以提高Gzip壓縮比率。 

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

3.9 更少的請求比更小的尺寸重要

檔案可以適當的合併，只保留基本的層級即可 

<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" />
<link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" />
<link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />

參考資料：

http://en.wikipedia.org/wiki/Css

http://www.w3.org/TR/CSS21/

http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/

http://www.w3.org/TR/css3-color/#html4

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

http://www.w3.org/International/tutorials/tutorial-char-enc/en/all.html

Pro CSS for High Traffic Websites

http://www.ibm.com/developerworks/cn/web/1009_chengfu_dojocss/

相關文章