CSS代碼優(yōu)化7個準(zhǔn)則
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:38:14 作者:佚名
我要評論

網(wǎng)頁制作Webjx文章簡介:整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護性和可讀性。以上的原理并不只是針對CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶
整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護性和可讀性。以上的原理并不只是針對CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗以及開發(fā)者經(jīng)驗。運用這些原則到你未來的項目
5.讓CSS能保證日后的維護

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

David Shea在他的網(wǎng)站mezzoblue.com中詳細(xì)講解了標(biāo)記指導(dǎo)(markup guide).
如果你是一個設(shè)計團隊中的一員,那么讓你的代碼保持規(guī)則的一致性并能與其他成語建立良好的溝通是相當(dāng)重要的,而且還要建立一種網(wǎng)站的標(biāo)準(zhǔn)。例如,團隊中的某個成員想出了一個比較不錯的網(wǎng)站標(biāo)簽切換界面,記錄下來這些想法和注解會幫助團隊的其他成員再次使用這種效果,這樣能夠避免HTML或CSS代碼的臃腫。看到本信息說明該文是通過網(wǎng)頁教學(xué)(jb51.net)整理發(fā)布的,請不要刪掉!
記錄工作主要包括標(biāo)記向?qū)?markup guides)和樣式表向?qū)?style sheet guides),這種工作并不僅僅適用于團隊,也同樣適用于一個人的設(shè)計工作(一個人的”團隊”)。畢竟,在完整一個設(shè)計項目之后,經(jīng)過一年甚至更長的時間,當(dāng)你再回來看到這些曾經(jīng)自己寫的代碼時,也一樣會覺得很陌生。將來你會通過自己曾經(jīng)的記錄了解到在那些CSS結(jié)構(gòu)是如何讓網(wǎng)頁表現(xiàn)的,或那個網(wǎng)頁對表單按鈕的起到副作用。
記住,一定要養(yǎng)成為CSS寫注釋的習(xí)慣。
7.壓縮使用
為了使得瀏覽器節(jié)省更多下載個載入時間,壓縮是一個不錯的解決方案,但是僅限于發(fā)布的時候。YUI Compressor和CSSTidy就是這樣方面的專家,他們能夠去除多余的代碼,校驗屬性互相覆蓋的錯誤。
許多流行的編輯器,比如BBEdit, TextMate, 和 TopStyle 都能夠幫助你格式化你的CSS代碼成你想要的樣子。你還能通過服務(wù)器壓縮技術(shù)使用PHP處理你的CSS。你可以找到更多的CSS優(yōu)化和壓縮的CSS工具。
有一點,這些程序盡可能會降低錯誤的發(fā)生,但并不是完美的。同樣,最好不要用他們?nèi)ヌ幚戆珻SS hack的文件。這也是另一個讓那些hack儲存在另外的文件里的原因。
總結(jié)
整理和優(yōu)化代碼不僅是為了你的CSS文件大小,還包括了維護性和可讀性。以上的原理并不只是針對CSS,它們還能應(yīng)用到HTML,Javascript以及其他編程語言。CSS文件不只是為了呈現(xiàn)給你網(wǎng)站的最終用戶。上面的原理可以幫助用戶體驗以及開發(fā)者經(jīng)驗。運用這些原則到你未來的項目中,一定能夠獲得重大的成效。
相關(guān)文章
- 眾所周知,SEO優(yōu)化很重要的一點就是布局,而DIV+CSS布局優(yōu)于TABLE,接下來為大家簡單介紹一下CSS代碼寫法優(yōu)化,對css代碼優(yōu)化相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-02
- 在div+css布局中,一般都這樣來整體構(gòu)架的: [code] <div id="header"></div> <div id="center"></div> <div id=&quo2009-07-11
- 在CSS建站中,無論其代碼長度還是文件大小都會影響到網(wǎng)頁的正確展示盒速度。那么如何來進行CSS的優(yōu)化和驗證呢?如果你的css水平不能夠達到自檢的程度,那么今天就和筆者一2014-10-11
使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實上,八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬,讓提高了用戶的加載速度和用戶體驗,不需要2012-12-24CSS代碼是否合理?是否優(yōu)化?-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
發(fā)現(xiàn)很多朋友對 CSS 的優(yōu)先權(quán)不甚了解,規(guī)則很簡單。需要說明的一點,如果你的樣式管理需要深層判斷 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