高效編寫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進制顏色值簡寫

CSS

/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;

1.3.2 屬性值簡寫

CSS

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 盡量抽取相似部分

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;}
-------------------->>>>>>>
.class1 .class2 .class3 .class4 .class5 .class6{
Position: absolute; left: 20px; top: 20px;
}

　　2. 關鍵要點

2.1 只使用小寫

CSS

<A HREF="/">Home</A>
<img src="google.png" alt="Google">

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

CSS

<p>What?_
<p>Yes please.

2.3 使用utf8編碼

html中：

XML/HTML

<meta charset="utf-8">

css中：

CSS

@charset "utf-8";

2.4 使用html5文檔類型

XML/HTML

<!DOCTYPE html>

2.5 驗證HTML與CSS文檔

驗證HTML

驗證CSS

2.6 使文檔語義化

2.7 多媒體（多終端）兼容

CSS Code

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

2.8 不要使用實體引用

CSS Code

The currency symbol for the Euro is “&eur;”.
The currency symbol for the Euro is “€”.

2.9 使用帶有語義的id和class

CSS Code

/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
.clear {}
/* Recommended: specific */
#gallery {}
#login {}
.video {}
/* Recommended: generic */
.aux {}
.alt {}

2.10 省略零值的單位

CSS Code

margin: 0;
padding: 0;

2.11 省略起始的零

CSS Code

font-size: .8em;

2.12 盡量避免CSS hacks

嘗試換種解決方案

2.13 為末尾的聲明添加分號

盡管省略末尾分號可以省略一個字節，但是非常不利于團隊維護，得不償失

CSS Code

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

2.14 選擇器的效率

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

CSS Code

#god > li {font-weight: bold}

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

2.15 后代選擇器

CSS Code

#toc li {font-weight: bold}

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

2.16 盡量避免全局選擇器

CSS Code

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

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

是用星號也一樣

CSS Code

#god li *

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

因此，對于全局選擇器，只建議一種用法：

CSS Code

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

2.17 避免tag+id或者class+id

CSS Code

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

2.18 關于tag+class

CSS Code

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

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

2.19 盡量減少規則數量

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

CSS Code

Span[mailfolder="true"] > table > tr > td.columnClass {...}
------------------->>>>>>>
.span-mailfolder-tbl-tdCol {...}

2.20 避免過長的class命名

可以考慮縮寫

CSS

ocHeroImage
ocEmailAddress

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

CSS

oc-HeroImage
oc-EmailAddress

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

CSS

heroImg
emailAddr

2.21 文件名中不應有空格

a) 有空格的文件名會被Google當成兩個關鍵字，可能帶來更多的搜索結果，引來更多流量，是好事

b) 有空格意味著不能省略引號，多了兩個字節

c) 空格會被瀏覽器自動轉換為%20，老的瀏覽器可能不支持，如果將%20硬編碼到URL中則每個實例中都多了兩個字符

CSS Code復制內容到剪貼板

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

2.22 省略URI的引號

CSS

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

2.23 盡量避免后代選擇器

CSS

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

CSS

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

2.25 發布之前一定要進行壓縮

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

　　3. 高級技巧

3.1 省略嵌入資源的協議

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

CSS

<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<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規范中指定了一些可以省略的標簽，可以縮減文件大小

XML/HTML

<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

3.3 文件結構

由于圖像等資源一般只有CSS文件使用，故可將圖像文件夾放到CSS文件同級目錄，這樣就可使用相對路徑，節省字節數

CSS

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

3.4 文件夾命名

通常文件夾會被命名為其所代表的資源的復數形式

images
assets
fonts

其實大可不必，使用單數形式可以節省許多字節，尤其是當每個項目的結構都類似時

img
asset
font

對于下面一段包含58字節的代碼：

CSS

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

優化后變為52字節，即10%的壓縮：

CSS

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

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

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

如果一個項目有幾百行這樣的代碼，那么就會節省幾百字節了。如果站點訪問量超大，則可節省數目客觀的帶寬資源。

3.5 末尾聲明的分號

前面提過，去掉末尾聲明的分號可以節省字節，但不利于維護。可以考慮在壓縮發布階段去掉。

CSS板

.clear {clear:both;}
.clear {clear:both}

3.6 背景色簡寫

背景色簡寫也可節省字節，但要慎用，因為省略掉的默認屬性會覆蓋前面的屬性。

3.7 濾鏡簡寫

CSS

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

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

CSS

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 更少的請求比更小的尺寸重要

文件可以適當的合并，只保留基本的層級即可

XML/HTML

<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" />

關于高效編寫CSS代碼的建議有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章名稱：高效編寫CSS代碼的建議有哪些
文章轉載：http://www.js-pz168.com/article8/jipoip.html

成都網站建設公司_創新互聯，為您提供動態網站、用戶體驗、標簽優化、軟件開發、定制開發、網站收錄

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

高效編寫CSS代碼的建議有哪些