《
高效整潔CSS代碼原則 (下)》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349B2013.htm
對(duì)于這個(gè)規(guī)矩并非硬性劃定，但無(wú)論您采用哪種寫法，我的提議是始終保持代碼一致。屬性多的分行寫，屬性少于3個(gè)可以寫一行。
當(dāng)對(duì)于一些樣式屬性較少的選擇器，我會(huì)寫到一行：
10. 使用<link>取代@import
12. 防止使用CSS表達(dá)式（Expression）
/*** 每個(gè)樣式屬性寫一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的樣式屬性寫在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
如上所示，expression中使用了JavaScript表達(dá)式。CSS屬性依據(jù)JavaScript表達(dá)式的計(jì)算成果來(lái)設(shè)置。
如果必需使用CSS表達(dá)式，必定要記住它們要計(jì)算成千上萬(wàn)次并且可能會(huì)對(duì)你頁(yè)面的性能產(chǎn)生影響。所以，在非不得已，請(qǐng)避免使用CSS表達(dá)式。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
/*** 抉擇器屬性少的寫在統(tǒng)一行 ***/
div{ background-color:#3399cc; color:#666;}
/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */
差別在于border:0把border設(shè)為0px，雖然在頁(yè)面上看不見(jiàn)，但按border默認(rèn)值懂得，瀏覽器仍然對(duì)border-width/border-color進(jìn)行了渲染，即已經(jīng)占用了內(nèi)存值。
而border:none把border設(shè)為"none"即不，閱讀器解析"none"時(shí)將不作出渲染動(dòng)作，即不會(huì)耗費(fèi)內(nèi)存值。所以倡議應(yīng)用border:none;
代碼注釋可以讓別人更容易讀懂你的代碼，且公道的組織代碼注解，可使得結(jié)構(gòu)更加清楚。你可以取舍做的樣式表的開(kāi)始增加目錄:
--> [
網(wǎng)站建設(shè)之]高效整齊CSS代碼原則 (下)
而對(duì)于代碼的主內(nèi)容，也應(yīng)適當(dāng)?shù)募右詣澐�，甚至在有必要的處所在�?duì)代碼加以注釋闡明，這樣也有利于團(tuán)隊(duì)開(kāi)發(fā):
8. 堅(jiān)持CSS的可讀性
6. 恰當(dāng)?shù)拇a正文
假如代碼中的屬性都能依照字母排序，那查找修改的時(shí)候就能更加疾速:
如斯你代碼的構(gòu)造就高深莫測(cè)，你可以輕易的查找和修改代碼。
當(dāng)你決議把網(wǎng)站名目安排到網(wǎng)絡(luò)上，那你就要斟酌對(duì)CSS進(jìn)行壓縮，出去解釋和空格，以使得網(wǎng)頁(yè)加載得更快,高效整潔CSS代碼原則 (上)。緊縮你的代碼，可以采用一些工具，如YUI Compressor，應(yīng)用它可精簡(jiǎn)CSS代碼，減少文件大小，以取得更高的加載速度。
7. 給你的CSS代碼排序
表達(dá)式的問(wèn)題就在于它的計(jì)算頻率要比咱們?cè)O(shè)想的多。不僅僅是在頁(yè)面顯示跟縮放時(shí)，就是在頁(yè)面轉(zhuǎn)動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要從新盤算一次。給CSS抒發(fā)式增添一個(gè)計(jì)數(shù)器可以跟蹤表白式的計(jì)算頻率。在頁(yè)面中隨意挪動(dòng)鼠標(biāo)都能夠輕松到達(dá)10000次以上的計(jì)算量。
11. 使用外部樣式表
9. 挑選更優(yōu)的樣式屬性值
CSS中有些屬性采取不同的屬性值，固然達(dá)到的后果差未幾，當(dāng)機(jī)能上卻存在著差別，如
/*** 樣式屬性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
這個(gè)準(zhǔn)則始終是一個(gè)很好的設(shè)計(jì)實(shí)際。不單可以更易于保護(hù)修正，更主要的是使用外部文件可以進(jìn)步頁(yè)面速度，由于CSS文件都能在瀏覽器中發(fā)生緩存。內(nèi)置在HTML文檔中的CSS則會(huì)在每次懇求中隨HTML文檔重新下載。所以，在實(shí)際利用中，沒(méi)有必要把CSS代碼內(nèi)置在HTML文檔中：
而是使用<link>導(dǎo)入外部款式表：<link rel="stylesheet" type="text/css" href="css/styles.css" />
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 設(shè)置字體顏色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0,高手賜招 網(wǎng)頁(yè)制作經(jīng)典技巧24條; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }
13. 代碼壓縮
首先,高性能網(wǎng)站建設(shè)的14個(gè)原則，@import不屬于XHTML標(biāo)簽，也不是Web尺度的一局部，它對(duì)于較早期的瀏覽器兼容也不高，并且對(duì)網(wǎng)站的性能有某些負(fù)面的影響。
同樣的，display:none暗藏對(duì)象瀏覽器不作渲染，不占用內(nèi)存。而visibility:hidden則會(huì)。
<,頁(yè)面重構(gòu)應(yīng)注意repaint和reflow的9個(gè)問(wèn)題;style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
Tag：原則 代碼 高效 原則 代碼 高效
CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)盛（但危險(xiǎn)）方式。Internet Explorer從第5個(gè)版本開(kāi)端支撐CSS表達(dá)式,頁(yè)面設(shè)計(jì)中的中文測(cè)試。下面的例子中，使用CSS表達(dá)式可以實(shí)現(xiàn)隔一個(gè)小時(shí)切換一次背景色彩：
書(shū)寫可讀的CSS將會(huì)使得更容易查找和修改樣式。對(duì)于以下兩種情形，哪種可讀性更高，我想不言而明。
(責(zé)任編輯：網(wǎng)站建設(shè))
高效整潔CSS代碼原則 (下)相關(guān)文章