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

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

你可以把它們簡(jiǎn)寫(xiě)成這樣:

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

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

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

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

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

2.避免使用Hack

Jon Hick的博客hicksdesign.co.uk/journal使用瀏覽器條件性注釋
　　Hack是一個(gè)糟糕的東西，它會(huì)為不同瀏覽器定義一樣的代碼，使得CSS繁冗?，F(xiàn)在我們知道使用條件性注釋來(lái)代替hack，他們?cè)贗E6和IE7中是被認(rèn)可的，甚至IE團(tuán)隊(duì)也推薦這樣使用。使用條件性注釋服務(wù)于符合瀏覽器特性專用的CSS代碼，因此，更小的、核心的CSS代碼用來(lái)服務(wù)于遵從標(biāo)準(zhǔn)的瀏覽器，只有需求條件出現(xiàn)的時(shí)候（比如IE），才會(huì)去下載額外的CSS文件！如果在其他網(wǎng)站看到本信息，說(shuō)明本教程來(lái)源是網(wǎng)頁(yè)教學(xué)WebjxCom網(wǎng)站，主要是為了防采集。
下面來(lái)看看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#
整理和優(yōu)化代碼不僅是為了你的CSS文件大小，還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS，它們還能應(yīng)用到HTML，Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗(yàn)以及開(kāi)發(fā)者經(jīng)驗(yàn)。運(yùn)用這些原則到你未來(lái)的項(xiàng)目

3.使用留白
　　無(wú)論是為了自己閱讀還是二次開(kāi)發(fā)，都要讓CSS保持良好的可讀性，留白就充當(dāng)了關(guān)鍵的角色。
　　我們不鼓勵(lì)你為了得到一個(gè)更小的CSS文件，就去掉所有的空白格式，如tab，換行，空格等。這里推薦嵌套的代碼使用一個(gè)tab縮進(jìn)，所有屬性獨(dú)立一行。

　　對(duì)比上圖中的兩種CSS書(shū)寫(xiě)格式，哪一種格式能讓你更加節(jié)約閱讀和修改的時(shí)間呢？留白的效果顯而易見(jiàn)，它會(huì)讓你更容易管理代碼。

4.移除多余的結(jié)構(gòu)(frameworks)和重設(shè)(resets)

Nathan Smith的960 Grid SystemCSS framework使用的重置規(guī)則
　　如果你選擇使用CSS framework，包括你自己寫(xiě)的，如果你去檢查代碼一定會(huì)發(fā)現(xiàn)該framework包含的一些規(guī)則并不適用于你當(dāng)前的文件，它們是可以被刪除的。本文由腳本之家（jb51.net）發(fā)布！轉(zhuǎn)載和采集的話請(qǐng)不要去掉！謝謝。
　　由此可以想到的還有reset，YUI Grid CSS使用的reset和Eric Meyer’s 重設(shè)(Reset)目前都很流行， Resets能夠移除不同瀏覽器的默認(rèn)樣式，使得頁(yè)面在各個(gè)瀏覽器之間的表現(xiàn)一致。但是它們通常包含了一個(gè)大的網(wǎng)站需要的所有屬性，一些例如<pre>,<code>,<sub>,<dfn>,<var>等等屬性對(duì)于普通網(wǎng)站來(lái)說(shuō)根本不會(huì)用上，刪掉那些你用不上的。Eric Meyer也會(huì)鼓勵(lì)你這樣做！
　　framework和reset會(huì)很好的幫助你的工作，但是如果不去掉那些你用不上的使用，反而會(huì)拖累你頁(yè)面的效率和可讀性。
#p#
整理和優(yōu)化代碼不僅是為了你的CSS文件大小，還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS，它們還能應(yīng)用到HTML，Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗(yàn)以及開(kāi)發(fā)者經(jīng)驗(yàn)。運(yùn)用這些原則到你未來(lái)的項(xiàng)目

5.讓CSS能保證日后的維護(hù)

Doug Bowman的stopdesign.comCSS 為層使用特殊的選擇器
　　另一種優(yōu)化CSS代碼的方法是按照你的習(xí)慣將CSS生命分成清晰的結(jié)構(gòu)塊。將CSS文件的聲明用注釋分隔開(kāi)并進(jìn)行排版，可以更方便自己在很長(zhǎng)時(shí)間以后重新審理這個(gè)CSS文件，到那時(shí)你的效率會(huì)高出許多。
　　然而，暴風(fēng)彬彬更崇尚那種拆分布局風(fēng)格，也就是給每種布局一個(gè)單獨(dú)的CSS文件。Andy Clarke的《超越CSS》(Transcending CSS)一書(shū)也是提倡這種方法。

6.記錄你的工作

David Shea在他的網(wǎng)站mezzoblue.com中詳細(xì)講解了標(biāo)記指導(dǎo)(markup guide).
　　如果你是一個(gè)設(shè)計(jì)團(tuán)隊(duì)中的一員，那么讓你的代碼保持規(guī)則的一致性并能與其他成語(yǔ)建立良好的溝通是相當(dāng)重要的，而且還要建立一種網(wǎng)站的標(biāo)準(zhǔn)。例如，團(tuán)隊(duì)中的某個(gè)成員想出了一個(gè)比較不錯(cuò)的網(wǎng)站標(biāo)簽切換界面，記錄下來(lái)這些想法和注解會(huì)幫助團(tuán)隊(duì)的其他成員再次使用這種效果，這樣能夠避免HTML或CSS代碼的臃腫?？吹奖拘畔⒄f(shuō)明該文是通過(guò)網(wǎng)頁(yè)教學(xué)（jb51.net）整理發(fā)布的，請(qǐng)不要?jiǎng)h掉！
　　記錄工作主要包括標(biāo)記向?qū)?markup guides)和樣式表向?qū)?style sheet guides)，這種工作并不僅僅適用于團(tuán)隊(duì)，也同樣適用于一個(gè)人的設(shè)計(jì)工作(一個(gè)人的”團(tuán)隊(duì)”)。畢竟，在完整一個(gè)設(shè)計(jì)項(xiàng)目之后，經(jīng)過(guò)一年甚至更長(zhǎng)的時(shí)間，當(dāng)你再回來(lái)看到這些曾經(jīng)自己寫(xiě)的代碼時(shí)，也一樣會(huì)覺(jué)得很陌生。將來(lái)你會(huì)通過(guò)自己曾經(jīng)的記錄了解到在那些CSS結(jié)構(gòu)是如何讓網(wǎng)頁(yè)表現(xiàn)的，或那個(gè)網(wǎng)頁(yè)對(duì)表單按鈕的起到副作用。
　　記住，一定要養(yǎng)成為CSS寫(xiě)注釋的習(xí)慣。

7.壓縮使用
　　為了使得瀏覽器節(jié)省更多下載個(gè)載入時(shí)間，壓縮是一個(gè)不錯(cuò)的解決方案，但是僅限于發(fā)布的時(shí)候。YUI Compressor和CSSTidy就是這樣方面的專家，他們能夠去除多余的代碼，校驗(yàn)屬性互相覆蓋的錯(cuò)誤。
許多流行的編輯器，比如BBEdit, TextMate, 和 TopStyle 都能夠幫助你格式化你的CSS代碼成你想要的樣子。你還能通過(guò)服務(wù)器壓縮技術(shù)使用PHP處理你的CSS。你可以找到更多的CSS優(yōu)化和壓縮的CSS工具。
　　有一點(diǎn)，這些程序盡可能會(huì)降低錯(cuò)誤的發(fā)生，但并不是完美的。同樣，最好不要用他們?nèi)ヌ幚戆珻SS hack的文件。這也是另一個(gè)讓那些hack儲(chǔ)存在另外的文件里的原因。

總結(jié)
　　整理和優(yōu)化代碼不僅是為了你的CSS文件大小，還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS，它們還能應(yīng)用到HTML，Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗(yàn)以及開(kāi)發(fā)者經(jīng)驗(yàn)。運(yùn)用這些原則到你未來(lái)的項(xiàng)目中，一定能夠獲得重大的成效。

最新評(píng)論