性能，這個詞如今被炒的很熱，也是每個開發者，由“知道”、“會做”之後必經的一個“怎樣做好”的階段。性能關乎用戶在不同設備和不同網絡狀態下的體驗。也被多方面因素所影響。此文說說CSS方面怎樣做到高性能。
高性能CSS
Html和CSS本身的性能問題並不突出，在提高可讀性和可維護性的前提下，如果能讓代碼運行和解析的速度更快，則是錦上添花了。
一、使用高效CSS選擇器
簡單來說，能被浏覽器快速解析和匹配的CSS選擇器，就是高效的選擇器。
首先要知道浏覽器如何解析CSS
舉個例子：
CSS Code復制內容到剪貼板我們常見的思維是，先去找到nav這個類，再找類包含的ul，再找ul中類為list的後代所有li中所有的div，簡而言之，就是從左到右。可事實是這樣麼？麼？麼？~
事實是相反的！意味著什麼呢？就是說它不是從第一個開始去慢慢的縮小范圍，而是從div這個“裸奔”的盒子開始，相當於遍歷，然後再找到li，以此類推，好吧不用我形容你應該知道這當中的消耗。理解這一原理非常重要，高效的選擇器意味著匹配更快，查找次數更少。所以我們定義選擇器時，應該讓第一次匹配時的數量達到最少，並且讓整體的匹配查找次數最少。
以上這些解釋恰恰遵循了這樣一些原則
（1）避免使用通配符
（2）避免使用標簽選擇器和單個屬性選擇器作為關鍵選擇器
（3）不要在id選擇器前加標簽名
（4）盡量不要在選擇符定義過多層級，層級越少，同時也降低了CSS和dom結構的耦合程度，提高樣式的可維護性
（ps：老實說上面的這些“禁忌”你是不是都有犯過？~）
做個小結，以上所說，有兩點需要知道，第一點在開頭就已經提到，CSS的性能問題表現的並不突出，特別是在小項目中，所以，可維護性為先；第二點是雖然定義id選擇器，有唯一性的優勢，但是一個頁面只能定義唯一id，定義過多id會使重用性降低，維護更困難，所以不建議多用id。
二、CSS相關的圖片處理
現在的網頁當中，圖片所占的比重以及它的重要性大家都知道。那麼如何處理好圖片以及如何為圖片設置樣式，才能讓用戶打開網頁時體驗更好呢？下面給出一些意見：
（1）不給圖片設置尺寸
在我個人的從業經歷當中，有過這樣的情況，我按照設計稿做好了頁面，交給後台去測試，他就突然跑過來跟我說：hi，你看，這兒出狀況了，我一看，壞菜，圖片出格了，我才想起沒有給圖片定義寬高（直接從設計稿裡切的也不需要），然後就犯錯了似的在CSS樣式裡定義了寬高。以至於後來我把這個作為下次再做頁面時候的注意事項。當我看到這一條意見的時候，才更知一二。
來看解釋，第一、設計人員為了畫面的精美，會制作一些超出需求尺寸的圖片；第二、同一張圖片可能會在頁面不同地方多次使用，比如縮略圖、正常圖、大圖。問題來了，如果圖片原始尺寸和實際需求不同，在使用過程中就會存在性能問題，利用樣式縮放會帶來cpu的額外計算過程，增加了圖片在浏覽器的渲染時間，網絡傳輸過程也會占更多帶寬，增加下載時間。因此，最佳做法是，為需要的部分單獨做一套圖片，初始頁面加載時就能更快展示。
（2）使用CSS“雪碧圖“
是將零散的圖片合並成一張大圖，在利用CSS進行背景定位。好處是減少請求數，提高了圖片整體的加載速度。
但它也存在一些缺點：
比如，多張圖片合並成大圖，需要精確計算，仔細的調整位置，單純手工制作是一件很復雜的事情。（所幸現在有一些工具可以幫我們做）
另外，維護過程復雜，要盡量讓已有的圖片保持原來的位置不變，如果是背景圖的尺寸發生變化導致原有區域無法放置，那就只好放棄，如果非要在原有位置修改，則剩余的圖片樣式都需要修改，是很繁瑣的過程。新加的圖片最好放在最後面。
還有就是使用不當會導致性能問題，最大的問題就是內存消耗。如果制作過程不做任何的規劃，隨意擺放，則可能會使圖片變得相當大，從而很占內存。
下面是一些最佳實踐：
1、在項目後期應用CSS sprite技術
因為一般在開發過程中，會比較頻繁的修改或者更換圖片，如果這個時候使用sprite技術，就會增加很多開發成本。
2、合理組織“雪碧”圖
如果要把所有的圖片放在一張圖上面，也會有不妥，維護方面也不會很方便。組織背景圖主要按照模塊和背景圖的風格來劃分。比如，作為展示的縮略圖放在一起，評論、點贊、上下箭頭等圖標放在一起等。
3、控制“雪碧”圖的尺寸和大小
因為大尺寸的圖片會占用大量的內存，所以要控制在合理尺寸，推薦長寬相乘不超過2500，大小在200kb內
4、合理控制背景圖單元間的距離及背景圖位置
這個原則是為了防止在背景圖比元素大小更小的時候，區域出現別的無關背景圖
5、借助相關工具處理sprite
三、減少CSS的代碼量
提高網站整體加載速度的一個重要手段，就是提高代碼文件的網絡傳輸速度。除了代碼壓縮，精簡代碼也是一種手段。
（1）定義簡潔的CSS規則
合並相關規則，定義簡潔的屬性值
合並規則是指比如font-family、font-size、font-weight等等，可以合並為font。 簡潔屬性值，比如顏色值：color，#33AAFF可以簡化為#3AF等。
（2）合並相同定義
網頁中總會有一些模塊有較高相似度，則可把同樣的部分共用一次定義，不同的部分再單獨定義。而且在CSS中，很多屬性是可以繼承的，則只需要在合適的地方定義一次即可。
（3）刪除無效的定義
無效的定義，並不會影響頁面功能顯示，但會影響頁面展示的性能，增加代碼量的同時，也增加了浏覽器解析代碼的時間。無效的定義包括無效的規則及無效的樣式屬性，一般是開發過程中引入的，而從直觀上無法判斷，這情況，可以用工具，Chrome自帶的工具就可以查找CSS中的無效樣式。。
其他CSS高性能實踐
（1）避免使用@import
@import導入的新樣式文件會阻止頁面的並行下載，這樣增加了文件的整體加載時間。
（2）避免使用IE浏覽器獨有樣式：圖片濾鏡和CSS表達式
圖片濾鏡的使用會在圖片加載時阻塞浏覽器的加載和渲染，並會增加額外的內存開銷。 Css表達式的作用是動態設置CSS屬性，表達式不只是有兼容性問題，還有性能問題，例如浏覽器大小改動、窗口改動時，會使得浏覽器頻繁計算，性能消耗極大。同樣的效果可以用Javascript來實現。
CSS3最佳實踐
查看浏覽器支持情況
在我們使用css3的過程中，問的最多的一個問題可能就是：兼容性如何？沒辦法，隨著css的發展，它可以為我們之前遇到的很多不好解決的問題提供一個更好的方案，讓我們忍不住去想能不能那樣去做。PC端有飽受诟病的IE系列，到了移動端會好很多，但有些還是不太好。所以，查看浏覽器支持情況幾乎成了必備動作。 如果使用的特性僅僅是裝飾點綴性的效果，不影響大局，則不需要考慮太多兼容問題，如果是出於設計要求，必須支持所有浏覽器，則要特別的關注一下了。 開發者可以選擇比如：caniuse.com、css3 Click Chart、CSS contents and browser compatibility這些在線工具來查看兼容性。
添加必要的浏覽器前綴
對於剛使用CSS不久的朋友來說，如果偶爾在某網站源碼當中看到諸如：“-webkit-、-moz-”等，可能會覺得很奇怪，這是什麼？它們是對應不同的浏覽器廠商所加上的前綴。
因為浏覽器在支持CSS3時，可能僅僅實現了標准定義的一個早期版本，所以，尚不支持標准寫法，給代碼添加浏覽器前綴也是無奈之舉，會使得代碼更多，更難維護。
但也不是為了“完美”而一定要去兼容所有的浏覽器，一般可以按照浏覽器或者系統的版本的市場占有率和目標用戶使用浏覽器的比例，來決定加不加前綴以及加幾種前綴。而且相信隨著逐步的發展，系統、浏覽器的不斷升級、更新，需要使用前綴的情況會減少。
問題又來了，既然需要添加必要的前綴，說明有些時候還是很有必要，那不得不加的情況下，那不是挺麻煩的？同樣的一條規則要寫三四遍，可能很多地方都要用，如何是好？別急，下面是幾個對策：
1、使用工具來添加CSS屬性的浏覽器前綴
Prefixr，可以在開發的後期對代碼進行處理。它會自動的添加需要的前綴和刪去不必要的前綴。
Autoprefixer，如果想要在開發過程中更多的自主性，可以使用這個工具，開發者可以自定義浏覽器支持范圍，它也有多種使用方式，可以集成到多個開發環境中。 此外還有幾種工具可供使用：cssFx、*CSS Agent*和-prefix-free。
2、借助CSS預處理技術
目前流行的有sass、less，具體方法是，針對CSS3樣式特性定義一份模板樣式。 優點是：避免大量重復代碼，只需要維護一份定義。
3、不要過度添加浏覽器前綴
有些開發者為了兼容所有浏覽器，不管什麼情況都為CSS代碼加上了所有浏覽器的前綴，這是一種消極的編碼方式，增加了太多的重復代碼，降低了浏覽器的解析性能，增加了復雜度，同時某些前綴的屬性可能沒有被浏覽器支持過。
4、添加CSS3標准屬性定義
何為標准屬性定義呢？就是不需要任何浏覽器前綴，大家可能都會注意到，很多使用css3的地方都會在最後的地方寫標准屬性定義，為什麼呢？因為當浏覽器支持標准屬性時，它可以覆蓋前面添加了前綴的定義，CSS3中的屬性標准定義才是符合規范的定義，添加了浏覽器前綴的定義會隨著浏覽器的更新逐漸被淘汰。
當然，還有一點需要注意的是，某些屬性，目前是屬於Only webkit或者Only Firefox的，那麼就沒有必要再寫上標准定義及其他浏覽器前綴了。
做好CSS3中新特性的兼容處理
說到兼容，就會提到低版本IE，比如很常見的圓角、透明圖片等，有時候我們會給它們降級的處理，比如filter或者Javascript，使用box-sizing、transform，推薦使用Modernizr,這個框架中包含了很多CSS3新特性的兼容方案。
無論是哪種方案，都會帶來性能上的損耗，不能毫無章法的濫用，仍然是需要大家去權衡和選擇。推薦一個如何更有效率的使用Html5的建議網站：Html5please。網站按照使用的方式把CSS3中的新特性分成了三類：
（1）直接使用
包含了大部分新特性，有些特性本身不會影響兼容性，如border-radius、media querIEs等，有些需要添加降級處理，如多背景圖，要設置一個單背景圖或者背景色作為備選。
（2）謹慎使用
這部分主要是性能問題，例如框陰影應用於占用很大區域的元素，頁面滾動或鼠標懸停時，會引起不小性能問題。
（3）避免使用
這部分因為它們可能僅支持某個浏覽器，比如倒影，則需要避免使用。
綜上所述，css能夠用來提高性能的方法還是蠻多的，但我們很容易忽略它們，因為它們所帶來的影響似乎沒有那麼明顯，而且，很多人可能為了圖方便，任意揮灑著自己的才華，想怎麼寫就怎麼寫，能達到效果就行，這也有點小消極哈，忘了你的優秀工程師目標了麻？！~~CSS規則雖不不難，真正寫好也不易，還是要有些追求極致的精神滴。諸君且寫且珍惜吧！~
高維護性CSS
CSS有些什麼特點？
簡單來說，使用方式：內聯、內嵌、外聯、import。為元素設置樣式的方式：元素標簽名、類名、id、各種選擇器，以及它們的組合。所以，它是很靈活的，如果不做任何的規范的限制，就肯定會導致CSS代碼的混亂和難以維護。
如何高效組織CSS代碼？
結構清晰、模塊分明，合理的代碼組織結構可提高代碼的重用性和可維護性，降低開發復雜度。那怎樣組織呢？
首先是組織代碼文件，可分為兩大類：通用類和業務類。 然後，有一個文件用來重置，常見命名是reset或者default、normalize等。
有一個文件用來存放通用模塊和一些基礎樣式，常命名為mod、common等，如頁面對話框，提示框，頭部，底部，側邊欄等，會在多個頁面用到，這樣方面各頁面引用，提高代碼復用度。
另外需要一個文件存在兼容舊版IE浏覽器的樣式，這樣做的好處有二：
一、減少非IE浏覽器加載樣式文件的負擔
二、如果未來決定不再支持舊版的IE浏覽器，則只需要去修改一個文件，不需要多個文件到處找去修改。當然，在處理浏覽器兼容問題上，有個原則是，是否有其他不存在兼容問題的方案，如果沒有，則把要做兼容的部分單獨放在一個文件中。
其余的CSS樣式文件則用於業務模塊，不同模塊的樣式文件放置於不同的文件夾中，原則上每個模塊的樣式文件不宜太大。
這樣可能會造成一個問題，一個頁面不是要引入很多文件了？頁面加載的時候http請求不是多很多？其實並不矛盾，文件的劃分只是為了方便開發和維護，發布的時候會使用工具把多個文件壓縮合並成一個文件，所以不用擔心引入多個文件的問題。
上面說的是文件的組織，那麼在文件中也要按照一定規則來組織樣式的聲明。 比如，按照模塊中元素的層級，如果是同級，則按照元素在頁面中的位置，從上到下，或者從左到右，若存在多個元素共用相同聲明，則應先聲明共通樣式。 如果覺得這樣還不夠，則可以使用一些更高級的方式，如less、sass，它們將CSS賦予了動態語言的特性，如變量、繼承、運算、函數等。
以上是從幾個大的方向去說的，下面涉及某幾個點談一談
使用CSS reset 統一浏覽器顯示效果
首先，html的標簽是有原始樣式的，但問題是在不同浏覽器中，標簽的默認樣式不盡相同，其中的某些差異給開發造成了麻煩，早在2004年，就有人開發了第一個重置樣式文件，叫undoHtml.Css,後續又有了多種重置方案，其中有個方案“火爆一時”，此方案總共就一行代碼*{margin：0；padding：0；}。重置了所有標簽默認的margin、padding樣式，但有一個弊端是增加了後續開發的復雜度，並不能很有效的提高整體開發的效率。另外，此方案性能也不佳，當頁面元素很多時就會影響頁面渲染的性能。所以，人們還在逐漸的探索更好的重置方式，目前有多個流行的重置方案，有Eric Meyer開發的Reset CSS和雅虎公司前端技術團隊開發的YUI Reset CSS。其實並不存在一種方案適合所有項目，所以最好還是選擇參考別人的方案然後設計一套適合自己項目的方案。
需要考慮如下幾點：
（1）Html5新標簽 需要重置它們的display樣式，因為在低版本IE中沒有定義它們的默認display樣式。
（2）padding、margin、border 標簽在浏覽器中的差異主要是與這三個樣式有關的默認樣式產生的，但也不是需要重置全部元素的margin、padding、border，應根據實際情況。
（3）字體設置 <h1>~<h6>、<strong>、<em>等語義化標簽都有默認字體，但實際當中所需要的字體大小或者粗細都跟默認不同，所以一般項目中都會對他們進行重置。
（4）其他元素的樣式重置 典型的有li默認的列表項樣式，table的單元格之間默認空間，a鏈接的下劃線等。
給CSS定義排序
CSS的邏輯性不強，隨意的書寫也不影響其作用，如果不借助工具對其排序也會很繁瑣，所以，很少有人會在意，但是排序還是有好處的。
比如：
1、更整潔
2、防止重復定義
3、能夠清晰查看定義
4、後續維護能快速定位
排序方式：
1、按類型 如，顯示和浮動、定位、尺寸、字體等
2、按字母 按字母順序排列，優點是規則簡單
3、按定義長度 按照樣式定義的字符長度排列
各有優劣，實際應用中，推薦使用第一種。 但是如果單靠前端工程師在編寫過程中這麼做的話也是很難的，可以在寫的過程中按照效率最高的方式寫，提交代碼時使用工具為css排序。既提高效率，又方便後續代碼閱讀和維護。有一款免費工具是 CSScomb。
合理利用CSS的權重，提高代碼重用性
何為權重，即CSS眾多類型選擇符的優先級，優先級高的樣式會覆蓋優先級低的樣式。權重的更具體規則，大家可以查閱資料，這裡不贅述。
這裡說說如何依照選擇符的權重定義合適的選擇符：
（1）盡量不使用ID選擇器
一個頁面中不允許定義兩個同樣的ID，而且ID選擇器權重很高，如果要覆蓋使用了ID選擇器的元素樣式，就必須在其元素上添加新的選擇符，或使用！important，這樣的結果會使無法重用的樣式代碼變得更多。最佳實踐是盡可能使用較低權重的選擇符作為基礎樣式。
（2）減少子選擇器的層級
也是降低子選擇符整體權重的過程，同時，層級越少，對Html結構的依賴就越低。引起CSS層級過多的另外一個原因是sass、less等工具的濫用，這也是我本人在使用之初就有意識到的問題，因為你可以使用嵌套和引用等方式來定義樣式了，這樣以來給自己省了很多功夫，但文件最終還是要編譯出來，我們不用反復的敲那麼多代碼了，但生成的代碼依然還是會很多，所以，方便了自己的同時依然要特別注意減少選擇器層級。
（3）使用組合的CSS類選擇器
使用這種方式，開發者可以不用考慮CSS樣式覆蓋的問題，避開了計算選擇符權重的過程，同時提高了代碼的重用性，組合的概念是把一個復雜的父類中的可變部分和穩定部分分割開來，穩定部分作為主體類，可變部分分成幾個簡單的類，類與類之間沒有繼承，同樣可以起到減少對Html結構的依賴，提高代碼重用性的作用。
如何兼容IE浏覽器？
IE8及以下版本的IE浏覽器一直是前端開發人員心中的痛。為了兼容它們做額外添加的代碼成為hack代碼，往往人們都不想去寫那些代碼。以下是兼容IE浏覽器的一些實踐方法。
（1）熟悉IE浏覽器中常見的樣式兼容問題
一類是浏覽器本身的bug，一類是和標准不兼容或還不支持標准。
（2）分離樣式兼容代碼
按照浏覽器的不同版本組織代碼文件，然後使用判斷語句，按需加載
em、px還是%？
談及這個話題的原因是，如今頁面功能變得越來越多，用來訪問頁面的設備越來越多，頁面的布局就是一個頗具挑戰的事情，而頁面當中的元素的尺寸和字體、圖片的大小等也跟布局息息相關。鑒於此，前端開發開始重視如何提高頁面布局，核心思想是將頁面元素的尺寸和字體大小設置為相對值。字體相對單位包括：em、ex、ch、rem。更多內容無需贅述，有更多的資料來講解。下面給出幾個最佳實踐：
（1）盡量設置相對尺寸
所謂設置相對尺寸，並不是說頁面整體的布局是自適應的，整體的尺寸可以是固定尺寸也可以是自適應的尺寸，這取決於頁面的設計。
（2）只有在可預知元素尺寸的情況下才使用絕對尺寸
比如設計上要求使用絕對寬度，比如整體寬度，側邊欄寬度，頁頭頁尾的高度固定等，在展示圖片、視頻的時候，合適的固定尺寸會讓這些多媒體元素展示獲得最佳的效果。
（3）使用em設置字體大小
使用px設置字體大小的可擴展性不好，使用百分比設置字體大小也不符合習慣，最佳方式是使用em設置字體大小，但隨著字體設置的層級增多，這種方式反而增加了維護的成本，對於此，CSS3引入了rem單位，是相對於根元素的字體大小計算的，就避免了這個問題，目前除了IE8及以下，大部分浏覽器都支持它。
此文很多東西都是點到為止，希望對一些新手來說有一定的引導作用，帶來一定的幫助。每個人在自己逐步的實踐當中都會有一些這樣那樣的感觸和經驗、教訓等，經常的總結和放入到自己的下一步實踐當中，相信是會很有好處的。大家一起加油！~