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

發布時間：2021-09-27 10:17:04 來源：億速云閱讀：123 作者：柒染欄目：web開發

這篇文章將為大家詳細講解有關高效編寫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代碼的建議有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

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

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

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

猜你喜歡

最新資訊

相關推薦

相關標簽