整理和優(yōu)化代碼不僅是為了你的CSS文件大小，還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS，它們還能應(yīng)用到HTML，Javascript以及其他編程語言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗(yàn)以及開發(fā)者經(jīng)驗(yàn)。運(yùn)用這些原則到你未來的項(xiàng)目
　　作為網(wǎng)頁設(shè)計(jì)師(前端工程師)，你可能還記得曾經(jīng)的那個(gè)網(wǎng)頁大小建議:一個(gè)網(wǎng)頁（包括HTML、CSS、Javacript、Flash和圖片）盡量不要超過30KB的大小，隨著互聯(lián)網(wǎng)的日益龐大，網(wǎng)絡(luò)帶寬也在飛速發(fā)展，很多設(shè)計(jì)師已經(jīng)不再考慮這條30KB的理想準(zhǔn)則。隨著越來越受歡迎的CSS布局和Javascript對(duì)網(wǎng)站用戶體驗(yàn)的強(qiáng)化，使得這種現(xiàn)象越來越普遍，尤其是對(duì)于大型網(wǎng)站來說，僅僅一個(gè)CSS文件就已經(jīng)超過了30KB的上限。
　　但是即便如此，現(xiàn)在也有很多準(zhǔn)則來幫助你在完成CSS布局后進(jìn)行CSS代碼的壓縮和優(yōu)化。CSS代碼優(yōu)化的目的并不僅僅是減少CSS文件的大小，它還能讓你的CSS代碼更有條理、更高效。在腳本之家，你將會(huì)學(xué)到更多關(guān)于CSS代碼優(yōu)化的知識(shí)，這能幫你更熟悉CSS代碼的規(guī)范性。熟悉這些概念還能讓你成為更全面的網(wǎng)頁設(shè)計(jì)師，從而寫出更優(yōu)化的CSS代碼。 1.使用簡寫
　　如果你現(xiàn)在還對(duì)簡寫一點(diǎn)都不了解，那你就又寫落伍了，不過幸好，學(xué)起來并不是很難。使用簡寫是一種讓代碼減少的最簡單方法。沒有比現(xiàn)在更適合實(shí)踐代碼簡寫的時(shí)候了，還等什么，一起來看看吧。
　　Margin、border、padding、background、font、list-style和outline 都是可以進(jìn)行簡寫的屬性。CSS簡寫就是不再使用不同的相類似屬性的聲明…

p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }

你可以把它們簡寫成這樣:

p { margin: 10px 20px 30px 40px; }

瀏覽器可以通過不同數(shù)量的屬性值來解釋你定義的CSS代碼，請(qǐng)看圖解:

上面的簡寫圖解說明的是依據(jù)不同的屬性值可以進(jìn)行不同的縮寫，這種方法同樣適用于padding和Border-width屬性。
Font的簡寫對(duì)于縮小代碼量很有幫助，而且能讓你少打很多字母; )

Font簡寫的例子。注:如果沒有定義某個(gè)屬性值的話，將繼承副級(jí)元素的定義或使用默認(rèn)值。

如果你對(duì)以上簡寫方法已經(jīng)了如指掌，你還可以看看以下兩個(gè)簡寫教程(英文)，也許會(huì)對(duì)你有所幫助:
1.CSS Shorthand Guide(CSS簡寫指導(dǎo))
2.Efficient CSS with shorthand properties(高效CSS屬性的簡寫)

2.避免使用Hack

Jon Hick的博客hicksdesign.co.uk/journal使用瀏覽器條件性注釋
　　Hack是一個(gè)糟糕的東西，它會(huì)為不同瀏覽器定義一樣的代碼，使得CSS繁冗?，F(xiàn)在我們知道使用條件性注釋來代替hack，他們在IE6和IE7中是被認(rèn)可的，甚至IE團(tuán)隊(duì)也推薦這樣使用。使用條件性注釋服務(wù)于符合瀏覽器特性專用的CSS代碼，因此，更小的、核心的CSS代碼用來服務(wù)于遵從標(biāo)準(zhǔn)的瀏覽器，只有需求條件出現(xiàn)的時(shí)候（比如IE），才會(huì)去下載額外的CSS文件！如果在其他網(wǎng)站看到本信息，說明本教程來源是網(wǎng)頁教學(xué)WebjxCom網(wǎng)站，主要是為了防采集。
下面來看看IE6使用條件性注釋的代碼范例:

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>

　　這段代碼使得IE6去下載額外的ie6.css解析它專用的css代碼。同樣的，如果針對(duì)IE7只用把上面的6與7替換就行了。

最新評(píng)論