高效整潔css代碼原則-資料下載頁
2025-08-18 17:17本頁面
【正文】 ity:hidden則會(huì)。10. 使用link代替@import首先，@import不屬于XHTML標(biāo)簽，也不是Web標(biāo)準(zhǔn)的一部分，它對(duì)于較早期的瀏覽器兼容也不高，并且對(duì)于網(wǎng)站的性能有某些負(fù)面的影響。具 體可以參考《高 性能網(wǎng)站設(shè)計(jì)：不要使用@import》。所以，請(qǐng)避免使用@import11. 使用外部樣式表這個(gè)原則始終是一個(gè)很好的設(shè)計(jì)實(shí)踐。不單 可以更易于維護(hù)修改，更重要的是使用外部文件可以提高頁面速度，因?yàn)镃SS文件都能在瀏覽器中產(chǎn)生緩存。內(nèi)置在HTML文檔中的CSS則會(huì)在每次請(qǐng)求中隨 HTML文檔重新下載。所以，在實(shí)際應(yīng)用中，沒有必要把CSS代碼內(nèi)置在HTML文檔中：style type=text/css container{ .. }sidebar{ .. }/style或link style=fontfamily:Arial, helvetica, sansserif。 color:666。 而是使用link導(dǎo)入外部樣式表：link rel=stylesheet type=text/css href=css/ /12. 避免使用CSS表達(dá)式（Expression）CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大（但危險(xiǎn)）方法。InternetExplorer從第5個(gè)版本開始支持CSS表達(dá)式。下面的例子中，使用CSS表達(dá)式可以實(shí)現(xiàn)隔一個(gè)小時(shí)切換一次背景顏色：backgroundcolor: expression( (new Date()).getHours()%2 ? B8D4FF : F08A00 )。如上所示，expression中使用了JavaScript表達(dá)式。CSS屬性根據(jù)JavaScript表達(dá)式的計(jì)算結(jié)果來設(shè)置。表達(dá)式的問題就在于它的計(jì)算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時(shí)，就是在頁面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次。給CSS表達(dá)式增加一個(gè)計(jì)數(shù)器可以跟蹤表達(dá)式的計(jì)算頻率。在頁面中隨便移動(dòng)鼠標(biāo)都可以輕松達(dá)到10000次以上的計(jì)算量。如果必須使用CSS表達(dá)式，一定要記住它們要計(jì)算成千上萬次并且可能會(huì)對(duì)你頁面的性能產(chǎn)生影響。所以，在非不得已，請(qǐng)避免使用CSS表達(dá)式。13. 代碼壓縮當(dāng)你決定把網(wǎng)站項(xiàng)目部署到網(wǎng)絡(luò)上，那你就要考慮對(duì)CSS進(jìn)行壓縮，出去注釋和空格，以使得網(wǎng)頁加載得更快。壓縮您的代碼，可以采用一些工具，如YUI Compressor利用它可精簡(jiǎn)CSS代碼，減少文件大小，以獲得更高的加載速度。14. 總結(jié)在本文中，我力圖更詳盡的總結(jié)書寫更高效的CSS代碼的原則，但 鑒于本人見識(shí)和精力有限，我還是希望這些原則能幫助您更好的書寫和管理您的CSS代碼，不知您又是如何書寫CSS的，是否也有一些想要分享的技巧？給我留 言吧謝謝~
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1