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)站的最終用戶。上面的原理可以幫助用戶
整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護(hù)性和可讀性。以上的原理并不只是針對(duì)CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語(yǔ)言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗(yàn)以及開發(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文件的聲明用注釋分隔開并進(jìn)行排版,可以更方便自己在很長(zhǎng)時(shí)間以后重新審理這個(gè)CSS文件,到那時(shí)你的效率會(huì)高出許多。
然而,暴風(fēng)彬彬更崇尚那種拆分布局風(fēng)格,也就是給每種布局一個(gè)單獨(dú)的CSS文件。Andy Clarke的《超越CSS》(Transcending CSS)一書也是提倡這種方法。
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)自己寫的代碼時(shí),也一樣會(huì)覺得很陌生。將來(lái)你會(huì)通過(guò)自己曾經(jīng)的記錄了解到在那些CSS結(jié)構(gòu)是如何讓網(wǎng)頁(yè)表現(xiàn)的,或那個(gè)網(wǎng)頁(yè)對(duì)表單按鈕的起到副作用。
記住,一定要養(yǎng)成為CSS寫注釋的習(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)以及開發(fā)者經(jīng)驗(yàn)。運(yùn)用這些原則到你未來(lái)的項(xiàng)目中,一定能夠獲得重大的成效。
相關(guān)文章
- 眾所周知,SEO優(yōu)化很重要的一點(diǎn)就是布局,而DIV+CSS布局優(yōu)于TABLE,接下來(lái)為大家簡(jiǎn)單介紹一下CSS代碼寫法優(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é)約了帶寬,讓提高了用戶的加載速度和用戶體驗(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

