CSS代碼優(yōu)化7個(gè)準(zhǔn)則
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2009-04-02 19:38:14 作者:佚名
我要評(píng)論
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶(hù)。上面的原理可以幫助用戶(hù)
整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶(hù)。上面的原理可以幫助用戶(hù)體驗(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)載和采集的話(huà)請(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è)面的效率和可讀性。
相關(guān)文章
- 眾所周知,SEO優(yōu)化很重要的一點(diǎn)就是布局,而DIV+CSS布局優(yōu)于TABLE,接下來(lái)為大家簡(jiǎn)單介紹一下CSS代碼寫(xiě)法優(yōu)化,對(duì)css代碼優(yōu)化相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-02
網(wǎng)頁(yè)頭部css代碼優(yōu)化實(shí)例
在div+css布局中,一般都這樣來(lái)整體構(gòu)架的: [code] <div id="header"></div> <div id="center"></div> <div id=&quo2009-07-11- 在CSS建站中,無(wú)論其代碼長(zhǎng)度還是文件大小都會(huì)影響到網(wǎng)頁(yè)的正確展示盒速度。那么如何來(lái)進(jìn)行CSS的優(yōu)化和驗(yàn)證呢?如果你的css水平不能夠達(dá)到自檢的程度,那么今天就和筆者一2014-10-11
使用css sprites來(lái)優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實(shí)現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實(shí)上,八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬,讓提高了用戶(hù)的加載速度和用戶(hù)體驗(yàn),不需要2012-12-24CSS代碼是否合理?是否優(yōu)化?-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
發(fā)現(xiàn)很多朋友對(duì) CSS 的優(yōu)先權(quán)不甚了解,規(guī)則很簡(jiǎn)單。需要說(shuō)明的一點(diǎn),如果你的樣式管理需要深層判斷 CSS 的優(yōu)先權(quán),更應(yīng)反思自己的 CSS 代碼,是否合理?是否優(yōu)化? CSS2008-10-17詳解CSS代碼重構(gòu)與優(yōu)化之路(經(jīng)典)
這篇文章主要介紹了詳解CSS代碼重構(gòu)與優(yōu)化之路(經(jīng)典) 的相關(guān)資料,需要的朋友可以參考下2016-01-07

