首頁»HTML/CSS»高效CSS開發核心要點

高效CSS開發核心要點

來源:ituring 發布時間:2013-07-29 閱讀次數:

  本文參考了業界規范及主流趨勢,詳盡整理了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" />
QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
css
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
买马稳赚秘诀