CSS編寫(xiě)時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些

今天就跟大家聊聊有關(guān)CSS編寫(xiě)時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)，先為威海等服務(wù)建站，威海等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為威海企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

性能，這個(gè)詞如今被炒的很熱，也是每個(gè)開(kāi)發(fā)者，由“知道”、“會(huì)做”之后必經(jīng)的一個(gè)“怎樣做好”的階段。性能關(guān)乎用戶(hù)在不同設(shè)備和不同網(wǎng)絡(luò)狀態(tài)下的體驗(yàn)。也被多方面因素所影響。此文說(shuō)說(shuō)css方面怎樣做到高性能。

高性能css

Html和css本身的性能問(wèn)題并不突出，在提高可讀性和可維護(hù)性的前提下，如果能讓代碼運(yùn)行和解析的速度更快，則是錦上添花了。

一、使用高效css選擇器

簡(jiǎn)單來(lái)說(shuō)，能被瀏覽器快速解析和匹配的css選擇器，就是高效的選擇器。

首先要知道瀏覽器如何解析css

舉個(gè)例子：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .nav ul.list li div{}  

我們常見(jiàn)的思維是，先去找到nav這個(gè)類(lèi)，再找類(lèi)包含的ul，再找ul中類(lèi)為list的后代所有l(wèi)i中所有的div，簡(jiǎn)而言之，就是從左到右。可事實(shí)是這樣么？么？么？~

事實(shí)是相反的！意味著什么呢？就是說(shuō)它不是從第一個(gè)開(kāi)始去慢慢的縮小范圍，而是從div這個(gè)“裸奔”的盒子開(kāi)始，相當(dāng)于遍歷，然后再找到li，以此類(lèi)推，好吧不用我形容你應(yīng)該知道這當(dāng)中的消耗。理解這一原理非常重要，高效的選擇器意味著匹配更快，查找次數(shù)更少。所以我們定義選擇器時(shí)，應(yīng)該讓第一次匹配時(shí)的數(shù)量達(dá)到最少，并且讓整體的匹配查找次數(shù)最少。

以上這些解釋恰恰遵循了這樣一些原則

（1）避免使用通配符

（2）避免使用標(biāo)簽選擇器和單個(gè)屬性選擇器作為關(guān)鍵選擇器

（3）不要在id選擇器前加標(biāo)簽名

（4）盡量不要在選擇符定義過(guò)多層級(jí)，層級(jí)越少，同時(shí)也降低了css和dom結(jié)構(gòu)的耦合程度，提高樣式的可維護(hù)性

（ps：老實(shí)說(shuō)上面的這些“禁忌”你是不是都有犯過(guò)？~）

做個(gè)小結(jié)，以上所說(shuō)，有兩點(diǎn)需要知道，第一點(diǎn)在開(kāi)頭就已經(jīng)提到，css的性能問(wèn)題表現(xiàn)的并不突出，特別是在小項(xiàng)目中，所以，可維護(hù)性為先；第二點(diǎn)是雖然定義id選擇器，有唯一性的優(yōu)勢(shì)，但是一個(gè)頁(yè)面只能定義唯一id，定義過(guò)多id會(huì)使重用性降低，維護(hù)更困難，所以不建議多用id。

二、css相關(guān)的圖片處理

現(xiàn)在的網(wǎng)頁(yè)當(dāng)中，圖片所占的比重以及它的重要性大家都知道。那么如何處理好圖片以及如何為圖片設(shè)置樣式，才能讓用戶(hù)打開(kāi)網(wǎng)頁(yè)時(shí)體驗(yàn)更好呢？下面給出一些意見(jiàn)：

（1）不給圖片設(shè)置尺寸

在我個(gè)人的從業(yè)經(jīng)歷當(dāng)中，有過(guò)這樣的情況，我按照設(shè)計(jì)稿做好了頁(yè)面，交給后臺(tái)去測(cè)試，他就突然跑過(guò)來(lái)跟我說(shuō)：hi，你看，這兒出狀況了，我一看，壞菜，圖片出格了，我才想起沒(méi)有給圖片定義寬高（直接從設(shè)計(jì)稿里切的也不需要），然后就犯錯(cuò)了似的在css樣式里定義了寬高。以至于后來(lái)我把這個(gè)作為下次再做頁(yè)面時(shí)候的注意事項(xiàng)。當(dāng)我看到這一條意見(jiàn)的時(shí)候，才更知一二。

來(lái)看解釋?zhuān)谝弧⒃O(shè)計(jì)人員為了畫(huà)面的精美，會(huì)制作一些超出需求尺寸的圖片；第二、同一張圖片可能會(huì)在頁(yè)面不同地方多次使用，比如縮略圖、正常圖、大圖。問(wèn)題來(lái)了，如果圖片原始尺寸和實(shí)際需求不同，在使用過(guò)程中就會(huì)存在性能問(wèn)題，利用樣式縮放會(huì)帶來(lái)cpu的額外計(jì)算過(guò)程，增加了圖片在瀏覽器的渲染時(shí)間，網(wǎng)絡(luò)傳輸過(guò)程也會(huì)占更多帶寬，增加下載時(shí)間。因此，最佳做法是，為需要的部分單獨(dú)做一套圖片，初始頁(yè)面加載時(shí)就能更快展示。

（2）使用css“雪碧圖“

是將零散的圖片合并成一張大圖，在利用css進(jìn)行背景定位。好處是減少請(qǐng)求數(shù)，提高了圖片整體的加載速度。

但它也存在一些缺點(diǎn)：

比如，多張圖片合并成大圖，需要精確計(jì)算，仔細(xì)的調(diào)整位置，單純手工制作是一件很復(fù)雜的事情。（所幸現(xiàn)在有一些工具可以幫我們做）

另外，維護(hù)過(guò)程復(fù)雜，要盡量讓已有的圖片保持原來(lái)的位置不變，如果是背景圖的尺寸發(fā)生變化導(dǎo)致原有區(qū)域無(wú)法放置，那就只好放棄，如果非要在原有位置修改，則剩余的圖片樣式都需要修改，是很繁瑣的過(guò)程。新加的圖片最好放在最后面。

還有就是使用不當(dāng)會(huì)導(dǎo)致性能問(wèn)題，最大的問(wèn)題就是內(nèi)存消耗。如果制作過(guò)程不做任何的規(guī)劃，隨意擺放，則可能會(huì)使圖片變得相當(dāng)大，從而很占內(nèi)存。

下面是一些最佳實(shí)踐：

1、在項(xiàng)目后期應(yīng)用css sprite技術(shù)

因?yàn)橐话阍陂_(kāi)發(fā)過(guò)程中，會(huì)比較頻繁的修改或者更換圖片，如果這個(gè)時(shí)候使用sprite技術(shù)，就會(huì)增加很多開(kāi)發(fā)成本。

2、合理組織“雪碧”圖

如果要把所有的圖片放在一張圖上面，也會(huì)有不妥，維護(hù)方面也不會(huì)很方便。組織背景圖主要按照模塊和背景圖的風(fēng)格來(lái)劃分。比如，作為展示的縮略圖放在一起，評(píng)論、點(diǎn)贊、上下箭頭等圖標(biāo)放在一起等。

3、控制“雪碧”圖的尺寸和大小

因?yàn)榇蟪叽绲膱D片會(huì)占用大量的內(nèi)存，所以要控制在合理尺寸，推薦長(zhǎng)寬相乘不超過(guò)2500，大小在200kb內(nèi)

4、合理控制背景圖單元間的距離及背景圖位置

這個(gè)原則是為了防止在背景圖比元素大小更小的時(shí)候，區(qū)域出現(xiàn)別的無(wú)關(guān)背景圖

5、借助相關(guān)工具處理sprite

三、減少css的代碼量

提高網(wǎng)站整體加載速度的一個(gè)重要手段，就是提高代碼文件的網(wǎng)絡(luò)傳輸速度。除了代碼壓縮，精簡(jiǎn)代碼也是一種手段。

（1）定義簡(jiǎn)潔的css規(guī)則

合并相關(guān)規(guī)則，定義簡(jiǎn)潔的屬性值

合并規(guī)則是指比如font-family、font-size、font-weight等等，可以合并為font。 簡(jiǎn)潔屬性值，比如顏色值：color，#33AAFF可以簡(jiǎn)化為#3AF等。

（2）合并相同定義

網(wǎng)頁(yè)中總會(huì)有一些模塊有較高相似度，則可把同樣的部分共用一次定義，不同的部分再單獨(dú)定義。而且在css中，很多屬性是可以繼承的，則只需要在合適的地方定義一次即可。

（3）刪除無(wú)效的定義

無(wú)效的定義，并不會(huì)影響頁(yè)面功能顯示，但會(huì)影響頁(yè)面展示的性能，增加代碼量的同時(shí)，也增加了瀏覽器解析代碼的時(shí)間。無(wú)效的定義包括無(wú)效的規(guī)則及無(wú)效的樣式屬性，一般是開(kāi)發(fā)過(guò)程中引入的，而從直觀上無(wú)法判斷，這情況，可以用工具，chrome自帶的工具就可以查找css中的無(wú)效樣式。。

其他css高性能實(shí)踐

（1）避免使用@import

@import導(dǎo)入的新樣式文件會(huì)阻止頁(yè)面的并行下載，這樣增加了文件的整體加載時(shí)間。

（2）避免使用IE瀏覽器獨(dú)有樣式：圖片濾鏡和css表達(dá)式

圖片濾鏡的使用會(huì)在圖片加載時(shí)阻塞瀏覽器的加載和渲染，并會(huì)增加額外的內(nèi)存開(kāi)銷(xiāo)。 Css表達(dá)式的作用是動(dòng)態(tài)設(shè)置css屬性，表達(dá)式不只是有兼容性問(wèn)題，還有性能問(wèn)題，例如瀏覽器大小改動(dòng)、窗口改動(dòng)時(shí)，會(huì)使得瀏覽器頻繁計(jì)算，性能消耗極大。同樣的效果可以用javascript來(lái)實(shí)現(xiàn)。

css3最佳實(shí)踐

查看瀏覽器支持情況

在我們使用css3的過(guò)程中，問(wèn)的最多的一個(gè)問(wèn)題可能就是：兼容性如何？沒(méi)辦法，隨著css的發(fā)展，它可以為我們之前遇到的很多不好解決的問(wèn)題提供一個(gè)更好的方案，讓我們?nèi)滩蛔∪ハ肽懿荒苣菢尤プ觥C端有飽受詬病的IE系列，到了移動(dòng)端會(huì)好很多，但有些還是不太好。所以，查看瀏覽器支持情況幾乎成了必備動(dòng)作。 如果使用的特性?xún)H僅是裝飾點(diǎn)綴性的效果，不影響大局，則不需要考慮太多兼容問(wèn)題，如果是出于設(shè)計(jì)要求，必須支持所有瀏覽器，則要特別的關(guān)注一下了。 開(kāi)發(fā)者可以選擇比如：caniuse.com、css3 Click Chart、css contents and browser compatibility這些在線工具來(lái)查看兼容性。

添加必要的瀏覽器前綴

對(duì)于剛使用css不久的朋友來(lái)說(shuō)，如果偶爾在某網(wǎng)站源碼當(dāng)中看到諸如：“-webkit-、-moz-”等，可能會(huì)覺(jué)得很奇怪，這是什么？它們是對(duì)應(yīng)不同的瀏覽器廠商所加上的前綴。

因?yàn)闉g覽器在支持css3時(shí)，可能僅僅實(shí)現(xiàn)了標(biāo)準(zhǔn)定義的一個(gè)早期版本，所以，尚不支持標(biāo)準(zhǔn)寫(xiě)法，給代碼添加瀏覽器前綴也是無(wú)奈之舉，會(huì)使得代碼更多，更難維護(hù)。

但也不是為了“完美”而一定要去兼容所有的瀏覽器，一般可以按照瀏覽器或者系統(tǒng)的版本的市場(chǎng)占有率和目標(biāo)用戶(hù)使用瀏覽器的比例，來(lái)決定加不加前綴以及加幾種前綴。而且相信隨著逐步的發(fā)展，系統(tǒng)、瀏覽器的不斷升級(jí)、更新，需要使用前綴的情況會(huì)減少。

問(wèn)題又來(lái)了，既然需要添加必要的前綴，說(shuō)明有些時(shí)候還是很有必要，那不得不加的情況下，那不是挺麻煩的？同樣的一條規(guī)則要寫(xiě)三四遍，可能很多地方都要用，如何是好？別急，下面是幾個(gè)對(duì)策：

1、使用工具來(lái)添加css屬性的瀏覽器前綴

Prefixr，可以在開(kāi)發(fā)的后期對(duì)代碼進(jìn)行處理。它會(huì)自動(dòng)的添加需要的前綴和刪去不必要的前綴。

Autoprefixer，如果想要在開(kāi)發(fā)過(guò)程中更多的自主性，可以使用這個(gè)工具，開(kāi)發(fā)者可以自定義瀏覽器支持范圍，它也有多種使用方式，可以集成到多個(gè)開(kāi)發(fā)環(huán)境中。 此外還有幾種工具可供使用：cssFx、*css Agent*和-prefix-free。

2、借助css預(yù)處理技術(shù)

目前流行的有sass、less，具體方法是，針對(duì)css3樣式特性定義一份模板樣式。 優(yōu)點(diǎn)是：避免大量重復(fù)代碼，只需要維護(hù)一份定義。

3、不要過(guò)度添加瀏覽器前綴

有些開(kāi)發(fā)者為了兼容所有瀏覽器，不管什么情況都為css代碼加上了所有瀏覽器的前綴，這是一種消極的編碼方式，增加了太多的重復(fù)代碼，降低了瀏覽器的解析性能，增加了復(fù)雜度，同時(shí)某些前綴的屬性可能沒(méi)有被瀏覽器支持過(guò)。

4、添加css3標(biāo)準(zhǔn)屬性定義

何為標(biāo)準(zhǔn)屬性定義呢？就是不需要任何瀏覽器前綴，大家可能都會(huì)注意到，很多使用css3的地方都會(huì)在最后的地方寫(xiě)標(biāo)準(zhǔn)屬性定義，為什么呢？因?yàn)楫?dāng)瀏覽器支持標(biāo)準(zhǔn)屬性時(shí)，它可以覆蓋前面添加了前綴的定義，css3中的屬性標(biāo)準(zhǔn)定義才是符合規(guī)范的定義，添加了瀏覽器前綴的定義會(huì)隨著瀏覽器的更新逐漸被淘汰。

當(dāng)然，還有一點(diǎn)需要注意的是，某些屬性，目前是屬于Only webkit或者Only firefox的，那么就沒(méi)有必要再寫(xiě)上標(biāo)準(zhǔn)定義及其他瀏覽器前綴了。

做好css3中新特性的兼容處理

說(shuō)到兼容，就會(huì)提到低版本IE，比如很常見(jiàn)的圓角、透明圖片等，有時(shí)候我們會(huì)給它們降級(jí)的處理，比如filter或者javascript，使用box-sizing、transform，推薦使用Modernizr,這個(gè)框架中包含了很多css3新特性的兼容方案。

無(wú)論是哪種方案，都會(huì)帶來(lái)性能上的損耗，不能毫無(wú)章法的濫用，仍然是需要大家去權(quán)衡和選擇。推薦一個(gè)如何更有效率的使用HTML5的建議網(wǎng)站：html5please。網(wǎng)站按照使用的方式把css3中的新特性分成了三類(lèi)：

（1）直接使用

包含了大部分新特性，有些特性本身不會(huì)影響兼容性，如border-radius、media queries等，有些需要添加降級(jí)處理，如多背景圖，要設(shè)置一個(gè)單背景圖或者背景色作為備選。

（2）謹(jǐn)慎使用

這部分主要是性能問(wèn)題，例如框陰影應(yīng)用于占用很大區(qū)域的元素，頁(yè)面滾動(dòng)或鼠標(biāo)懸停時(shí)，會(huì)引起不小性能問(wèn)題。

（3）避免使用

這部分因?yàn)樗鼈兛赡軆H支持某個(gè)瀏覽器，比如倒影，則需要避免使用。

綜上所述，css能夠用來(lái)提高性能的方法還是蠻多的，但我們很容易忽略它們，因?yàn)樗鼈兯鶐?lái)的影響似乎沒(méi)有那么明顯，而且，很多人可能為了圖方便，任意揮灑著自己的才華，想怎么寫(xiě)就怎么寫(xiě)，能達(dá)到效果就行，這也有點(diǎn)小消極哈，忘了你的優(yōu)秀工程師目標(biāo)了麻？！~~css規(guī)則雖不不難，真正寫(xiě)好也不易，還是要有些追求極致的精神滴。諸君且寫(xiě)且珍惜吧！~

高維護(hù)性css

Css有些什么特點(diǎn)？

簡(jiǎn)單來(lái)說(shuō)，使用方式：內(nèi)聯(lián)、內(nèi)嵌、外聯(lián)、import。為元素設(shè)置樣式的方式：元素標(biāo)簽名、類(lèi)名、id、各種選擇器，以及它們的組合。所以，它是很靈活的，如果不做任何的規(guī)范的限制，就肯定會(huì)導(dǎo)致css代碼的混亂和難以維護(hù)。

如何高效組織css代碼？

結(jié)構(gòu)清晰、模塊分明，合理的代碼組織結(jié)構(gòu)可提高代碼的重用性和可維護(hù)性，降低開(kāi)發(fā)復(fù)雜度。那怎樣組織呢？

首先是組織代碼文件，可分為兩大類(lèi)：通用類(lèi)和業(yè)務(wù)類(lèi)。 然后，有一個(gè)文件用來(lái)重置，常見(jiàn)命名是reset或者default、normalize等。

有一個(gè)文件用來(lái)存放通用模塊和一些基礎(chǔ)樣式，常命名為mod、common等，如頁(yè)面對(duì)話框，提示框，頭部，底部，側(cè)邊欄等，會(huì)在多個(gè)頁(yè)面用到，這樣方面各頁(yè)面引用，提高代碼復(fù)用度。

另外需要一個(gè)文件存在兼容舊版IE瀏覽器的樣式，這樣做的好處有二：

一、減少非IE瀏覽器加載樣式文件的負(fù)擔(dān)

二、如果未來(lái)決定不再支持舊版的IE瀏覽器，則只需要去修改一個(gè)文件，不需要多個(gè)文件到處找去修改。當(dāng)然，在處理瀏覽器兼容問(wèn)題上，有個(gè)原則是，是否有其他不存在兼容問(wèn)題的方案，如果沒(méi)有，則把要做兼容的部分單獨(dú)放在一個(gè)文件中。

其余的css樣式文件則用于業(yè)務(wù)模塊，不同模塊的樣式文件放置于不同的文件夾中，原則上每個(gè)模塊的樣式文件不宜太大。

這樣可能會(huì)造成一個(gè)問(wèn)題，一個(gè)頁(yè)面不是要引入很多文件了？頁(yè)面加載的時(shí)候http請(qǐng)求不是多很多？其實(shí)并不矛盾，文件的劃分只是為了方便開(kāi)發(fā)和維護(hù)，發(fā)布的時(shí)候會(huì)使用工具把多個(gè)文件壓縮合并成一個(gè)文件，所以不用擔(dān)心引入多個(gè)文件的問(wèn)題。

上面說(shuō)的是文件的組織，那么在文件中也要按照一定規(guī)則來(lái)組織樣式的聲明。 比如，按照模塊中元素的層級(jí)，如果是同級(jí)，則按照元素在頁(yè)面中的位置，從上到下，或者從左到右，若存在多個(gè)元素共用相同聲明，則應(yīng)先聲明共通樣式。 如果覺(jué)得這樣還不夠，則可以使用一些更高級(jí)的方式，如less、sass，它們將css賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、繼承、運(yùn)算、函數(shù)等。

以上是從幾個(gè)大的方向去說(shuō)的，下面涉及某幾個(gè)點(diǎn)談一談

使用css reset 統(tǒng)一瀏覽器顯示效果

首先，html的標(biāo)簽是有原始樣式的，但問(wèn)題是在不同瀏覽器中，標(biāo)簽的默認(rèn)樣式不盡相同，其中的某些差異給開(kāi)發(fā)造成了麻煩，早在2004年，就有人開(kāi)發(fā)了第一個(gè)重置樣式文件，叫undohtml.Css,后續(xù)又有了多種重置方案，其中有個(gè)方案“火爆一時(shí)”，此方案總共就一行代碼*{margin：0；padding：0；}。重置了所有標(biāo)簽?zāi)J(rèn)的margin、padding樣式，但有一個(gè)弊端是增加了后續(xù)開(kāi)發(fā)的復(fù)雜度，并不能很有效的提高整體開(kāi)發(fā)的效率。另外，此方案性能也不佳，當(dāng)頁(yè)面元素很多時(shí)就會(huì)影響頁(yè)面渲染的性能。所以，人們還在逐漸的探索更好的重置方式，目前有多個(gè)流行的重置方案，有Eric Meyer開(kāi)發(fā)的Reset CSS和雅虎公司前端技術(shù)團(tuán)隊(duì)開(kāi)發(fā)的YUI Reset CSS。其實(shí)并不存在一種方案適合所有項(xiàng)目，所以最好還是選擇參考別人的方案然后設(shè)計(jì)一套適合自己項(xiàng)目的方案。

需要考慮如下幾點(diǎn)：

（1）HTML5新標(biāo)簽 需要重置它們的display樣式，因?yàn)樵诘桶姹綢E中沒(méi)有定義它們的默認(rèn)display樣式。

（2）padding、margin、border 標(biāo)簽在瀏覽器中的差異主要是與這三個(gè)樣式有關(guān)的默認(rèn)樣式產(chǎn)生的，但也不是需要重置全部元素的margin、padding、border，應(yīng)根據(jù)實(shí)際情況。

（3）字體設(shè)置 <h2>~<h7>、<strong>、<em>等語(yǔ)義化標(biāo)簽都有默認(rèn)字體，但實(shí)際當(dāng)中所需要的字體大小或者粗細(xì)都跟默認(rèn)不同，所以一般項(xiàng)目中都會(huì)對(duì)他們進(jìn)行重置。

（4）其他元素的樣式重置 典型的有l(wèi)i默認(rèn)的列表項(xiàng)樣式，table的單元格之間默認(rèn)空間，a鏈接的下劃線等。

給css定義排序

Css的邏輯性不強(qiáng)，隨意的書(shū)寫(xiě)也不影響其作用，如果不借助工具對(duì)其排序也會(huì)很繁瑣，所以，很少有人會(huì)在意，但是排序還是有好處的。

比如：

1、更整潔

2、防止重復(fù)定義

3、能夠清晰查看定義

4、后續(xù)維護(hù)能快速定位

排序方式：

1、按類(lèi)型 如，顯示和浮動(dòng)、定位、尺寸、字體等

2、按字母 按字母順序排列，優(yōu)點(diǎn)是規(guī)則簡(jiǎn)單

3、按定義長(zhǎng)度 按照樣式定義的字符長(zhǎng)度排列

各有優(yōu)劣，實(shí)際應(yīng)用中，推薦使用第一種。 但是如果單靠前端工程師在編寫(xiě)過(guò)程中這么做的話也是很難的，可以在寫(xiě)的過(guò)程中按照效率最高的方式寫(xiě)，提交代碼時(shí)使用工具為css排序。既提高效率，又方便后續(xù)代碼閱讀和維護(hù)。有一款免費(fèi)工具是 CSScomb。

合理利用css的權(quán)重，提高代碼重用性

何為權(quán)重，即css眾多類(lèi)型選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的樣式。權(quán)重的更具體規(guī)則，大家可以查閱資料，這里不贅述。

這里說(shuō)說(shuō)如何依照選擇符的權(quán)重定義合適的選擇符：

（1）盡量不使用ID選擇器

一個(gè)頁(yè)面中不允許定義兩個(gè)同樣的ID，而且ID選擇器權(quán)重很高，如果要覆蓋使用了ID選擇器的元素樣式，就必須在其元素上添加新的選擇符，或使用！important，這樣的結(jié)果會(huì)使無(wú)法重用的樣式代碼變得更多。最佳實(shí)踐是盡可能使用較低權(quán)重的選擇符作為基礎(chǔ)樣式。

（2）減少子選擇器的層級(jí)

也是降低子選擇符整體權(quán)重的過(guò)程，同時(shí)，層級(jí)越少，對(duì)html結(jié)構(gòu)的依賴(lài)就越低。引起Css層級(jí)過(guò)多的另外一個(gè)原因是sass、less等工具的濫用，這也是我本人在使用之初就有意識(shí)到的問(wèn)題，因?yàn)槟憧梢允褂们短缀鸵玫确绞絹?lái)定義樣式了，這樣以來(lái)給自己省了很多功夫，但文件最終還是要編譯出來(lái)，我們不用反復(fù)的敲那么多代碼了，但生成的代碼依然還是會(huì)很多，所以，方便了自己的同時(shí)依然要特別注意減少選擇器層級(jí)。

（3）使用組合的css類(lèi)選擇器

使用這種方式，開(kāi)發(fā)者可以不用考慮css樣式覆蓋的問(wèn)題，避開(kāi)了計(jì)算選擇符權(quán)重的過(guò)程，同時(shí)提高了代碼的重用性，組合的概念是把一個(gè)復(fù)雜的父類(lèi)中的可變部分和穩(wěn)定部分分割開(kāi)來(lái)，穩(wěn)定部分作為主體類(lèi)，可變部分分成幾個(gè)簡(jiǎn)單的類(lèi)，類(lèi)與類(lèi)之間沒(méi)有繼承，同樣可以起到減少對(duì)html結(jié)構(gòu)的依賴(lài)，提高代碼重用性的作用。

如何兼容IE瀏覽器？

IE8及以下版本的IE瀏覽器一直是前端開(kāi)發(fā)人員心中的痛。為了兼容它們做額外添加的代碼成為hack代碼，往往人們都不想去寫(xiě)那些代碼。以下是兼容IE瀏覽器的一些實(shí)踐方法。

（1）熟悉IE瀏覽器中常見(jiàn)的樣式兼容問(wèn)題

一類(lèi)是瀏覽器本身的bug，一類(lèi)是和標(biāo)準(zhǔn)不兼容或還不支持標(biāo)準(zhǔn)。

（2）分離樣式兼容代碼

按照瀏覽器的不同版本組織代碼文件，然后使用判斷語(yǔ)句，按需加載

em、px還是%？

談及這個(gè)話題的原因是，如今頁(yè)面功能變得越來(lái)越多，用來(lái)訪問(wèn)頁(yè)面的設(shè)備越來(lái)越多，頁(yè)面的布局就是一個(gè)頗具挑戰(zhàn)的事情，而頁(yè)面當(dāng)中的元素的尺寸和字體、圖片的大小等也跟布局息息相關(guān)。鑒于此，前端開(kāi)發(fā)開(kāi)始重視如何提高頁(yè)面布局，核心思想是將頁(yè)面元素的尺寸和字體大小設(shè)置為相對(duì)值。字體相對(duì)單位包括：em、ex、ch、rem。更多內(nèi)容無(wú)需贅述，有更多的資料來(lái)講解。下面給出幾個(gè)最佳實(shí)踐：

（1）盡量設(shè)置相對(duì)尺寸

所謂設(shè)置相對(duì)尺寸，并不是說(shuō)頁(yè)面整體的布局是自適應(yīng)的，整體的尺寸可以是固定尺寸也可以是自適應(yīng)的尺寸，這取決于頁(yè)面的設(shè)計(jì)。

（2）只有在可預(yù)知元素尺寸的情況下才使用絕對(duì)尺寸

比如設(shè)計(jì)上要求使用絕對(duì)寬度，比如整體寬度，側(cè)邊欄寬度，頁(yè)頭頁(yè)尾的高度固定等，在展示圖片、視頻的時(shí)候，合適的固定尺寸會(huì)讓這些多媒體元素展示獲得最佳的效果。

（3）使用em設(shè)置字體大小

使用px設(shè)置字體大小的可擴(kuò)展性不好，使用百分比設(shè)置字體大小也不符合習(xí)慣，最佳方式是使用em設(shè)置字體大小，但隨著字體設(shè)置的層級(jí)增多，這種方式反而增加了維護(hù)的成本，對(duì)于此，css3引入了rem單位，是相對(duì)于根元素的字體大小計(jì)算的，就避免了這個(gè)問(wèn)題，目前除了IE8及以下，大部分瀏覽器都支持它。

看完上述內(nèi)容，你們對(duì)CSS編寫(xiě)時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文標(biāo)題：CSS編寫(xiě)時(shí)的高性能以及高維護(hù)性代碼優(yōu)化建議有哪些
網(wǎng)頁(yè)地址：http://bm7419.com/article32/jceepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、Google、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)