關於css的建議和效能最佳化總結

1.前言

還有幾天就到國慶中秋了，快要放假了，先祝大家節日快樂！之前寫過js的寫作建議和技巧，那麼今天就來聊聊css吧！說到css，每一個網頁都離不開css，但是對於css，很多開發人員的想法就是，css只要能用來布局，把排出來就可以了，其它的細節或者最佳化，不需要怎麼考慮。但是我覺得css可不只是把頁面的布局完成就是完事的，還需要考慮很多細節有最佳化，更不會像大家想得那麼簡單，在學習當中，如果發現什麼技巧或者最佳化的點，我也會學以致用！那麼今天，就分享下我總結的css寫作建議和效能最佳化的一些問題！希望能幫讓大家對神奇的css有一個新認識，當然，如果大家覺得還有什麼其它的建議。歡迎指點！

2.css渲染規則

首選，關於css渲染的規則，大家可能都知道，是從右至左的渲染！如下栗子

.nav h3 a{font-size: 14px;}

渲染過程大概是：首先找到所有的a，沿著a的父元素尋找h3，然後再沿著h3，尋找.nav。中途找到了符合匹配規則的節點就加入結果集。如果找到根項目html都沒有匹配，則不再遍曆這條路徑，從下一個a開始重複這個尋找匹配（只要頁面上有多個最右節點為a）。
參考：CSS選取器從右向左的匹配規則

3.嵌套層級不要超過3級

一般情況下，元素的嵌套層級不能超過3級，過度的嵌套會導致代碼變得臃腫，沉餘，複雜。導致css檔案體積變大，造成效能浪費，影響渲染的速度！而且過於依賴HTML文檔結構。這樣的css樣式，維護起來，極度麻煩，如果以後要修改樣式，可能要使用!important覆蓋。

4.樣式重設

這個我目前保持中立意見，因為看著網上的文章，有些人支援使用樣式重設，有些人不支援使用，誰也說服不了誰。我自己的情況，我有使用樣式重設，但是是比較簡單的一個總結，代碼如下！

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul {  margin: 0;  padding: 0;}h1, h2, h3, h4, h5, h6 {  font-weight: normal;}ol, ul {  list-style: none;}h1{  font-size: 24px;}h2{  font-size: 20px;}h3{  font-size: 18px;}h4 {  font-size: 16px;}h5{  font-size: 14px;}h6{  font-size: 12px;}

5.樣式層級

首先，css樣式層級整理如下

!important>行內樣式 >id樣式>class樣式>標籤名樣式。
然後有一點要提一下就是，組合選取器使用權值會疊加的。比如id的權值是100，class是10，標籤名是1（其它不清楚了）！那麼p.test-class權值就是11，p#test就是101

比如有一個p

<p id="test" class="test-class" style="color:green;"></p>

那麼樣式權值方面就是

p {color: red !improtant;}（大於下面的一切）<p id="test" class="test-class" style="color:black;"></p>（大於111）p#test.test-class（111）#id.test-class（110）p#test（101）#test（100）p.test-class（11）.test-class（10）p（1）*（小於1）

6.inline-block的邊距

不解釋，看圖

上面幾個p元素margin和padding都為0，但是還有邊距。這個的解決方案有兩種

1.刪除代碼之前的空行空格

帶display:inline-block的元素之前的空行都刪除掉，如下寫法

2.父元素font-size設定為0,這個直接看圖

7.圖片要設定width和height

如果頁面有使用img標籤，那麼img很建議設定width和height。目的是為了在網速差或者其它原因載入不出圖片的時候，保證布局不會亂。
如下栗子，一個很普通的布局。

但是萬一出現什麼情況，圖片載入不出來的話，建議的處理方式是第一種，顯示一張預設圖片，即使不顯示預設圖片，也讓圖片有一個佔位的作用，保證布局不會亂！

如果圖片載入不出，img又沒有設定width和height的話，就會像下面這樣，布局亂了！

關於設定width和height，我順便說幾點
1.PC站，建議在img標籤的屬性設定width和height。這樣避免載入不出css而錯位
2.手機站，建議用css設定img的width和height，因為手機站要做適配，在屬性設定width和height不靈活，比如使用rem布局，在屬性那裡設定不了width和height。
3.如果圖片不固定，但是有一個max-width和max-height，那麼建議在img的父元素設定width和height。img根據父元素的width和height設定max-width和max-height。

8.任意元素垂直置中

這裡只放圖，不解釋

8-1.table-cell

8-2.flex

8-3.position，transform

8-4.position，margin

這個方式不推薦使用，因為這個寫法，.p2的寬高必須要設定，否則就是100%;比如設定了top:0;bottom:0;效果和設定height:100%;是一樣的。如果想要避免，就必須要設定height。

9.圖片預先載入

這裡說的預先載入，不是懶載入。首先根據我個人理解科普下，懶載入和預先載入的區別。

懶載入：頁面載入的時候，先載入一部分內容（一般是先載入首屏內容），其它內容等到需要載入的時候再進行載入！

預先載入：頁面載入的時候，先載入一部分內容（一般是先載入首屏內容），其它內容等到先載入的一部分內容（一般是首屏內容）載入完了，再進行載入。

兩種方式，都是為了減少使用者進入網站的時候，更快的看到首屏的內容！

下面栗子，將這#preloader這個元素加入到到html中，就可以實現通過CSS的background屬性將圖片預先載入到螢幕外的背景上。只要這些圖片的路徑保持不變，當它們在web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預先載入（緩衝）的圖片。簡單、高效，不需要任何JavaScript。

#preloader {    /*需要預先載入的圖片*/    background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat;    width: 0px;    height: 0px;    display: inline;}

但是這樣會有一個問題，因為#preloader預先載入的圖片，會和頁面上的其他內容一起載入，增加了頁面的整體載入時間。所以需要用js控制

function preloader(urlArr,obj) {    var bgText='';    for(var i=0,len=urlArr.length;i<len;i++){        bgText+='url('+urlArr[i]+') no-repeat,';    }    obj.style.background=bgText.substr(0,bgText.length-1);}window.onload = function() {   preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader'));}

原理也很簡單，就是先讓首屏的圖片載入完，然後再載入其它的圖片。通過給#preloader設定背景圖片，載入所需要的圖片，然後頁面上需要載入這些圖片的時候，就直接從緩衝裡面拿圖片，不需要通過http請求擷取圖片，這樣載入就很快。

10.慎用*萬用字元

在做網頁的時候經常會使用下面兩種方式重設樣式，以此來消除標籤的預設布局和不同瀏覽器對於同一個標籤的渲染。

*{margin：0；padding：0;}

上面這種方式，代碼少，但是效能差，因為渲染的時候，要匹配頁面上所有的元素！很多基礎樣式沒有margin和padding的元素，比如p，li等。都被匹配，完全沒必要！
下面看另一種方式。

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin：0；padding：0;}

這種方式，代碼稍微多，但是效能比上面的方式好，在渲染的時候，只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul這裡面的元素，這些元素帶有margin和padding，需要重設！
再看例子：

.test * {color: red;}

匹配文檔中所有的元素，然後分別向上逐級匹配class為test的元素，直到文檔的根節點

.test a {color: red;}

匹配文檔中所有a的元素，然後分別向上逐級匹配class為test的元素，直到文檔的根節點

兩種方式，哪種更好不言而喻，所以在開發的時候，建議避免使用通配選取器。

11.合并，壓縮css

這個沒什麼好解釋的，就是壓縮和合并css。

首先壓縮css，除了使用工具，比如gulp,webpack等把代碼壓縮，把空格和換行都去掉。還有一個建議就是屬性簡寫。

比如

margin-top:0;margin-right:10px;margin-bottom:10px;margin-left:10px;background-image: url('test.jpg');background-position: top center;background-repeat: no-repeat;border-width:1px;border-style:solid;border-color:#000;color:#0099FF;

可以換成下面的

margin:0 10px 10px 10px;background: url('test.jpg') no-repeat top center;border:1px solid #000;color:#09F;

至於合并的時候，我按照自己的開發習慣給幾個建議：
1.合并公用的樣式，比如項目的頭部，底部，側邊欄這些，一般都是公用的，這些可以寫在一個公用樣式表上，比如main.css。
2.上面所說的main.css是每一個頁面都需要引入，而樣式重設表reset.css也是每一個頁面都需要用到的，那麼建議main.css和reset.css合并成一個檔案，給頁面引入！減少請求！
3.每個頁面對應的樣式為獨立的檔案，比如首頁對應的是index.css。產品列表頁對應的樣式是product-list.css。那麼index.css就只在首頁引入，其它頁面不引入，因為引入純屬浪費請求資源！其他頁面對應的樣式也是這個處理方式！index.css，product-list.css等其它頁面的樣式就保留單獨的檔案，不作合并處理！

12.css在head引入

瀏覽器在所有的 stylesheets 載入完成之後，才會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面裡的任何內容，頁面會一直呈現空白。這也是為什麼要把 stylesheet 放在頭部的原因。如果放在 HTML 頁面底部，頁面渲染就不僅僅是在等待 stylesheet 的載入，還要等待 html 內容載入完成，這樣一來，使用者看到頁面的時間會更晚。

13.避免使用@import

css樣式檔案有兩種引入方式，一種是link元素，另一種是@import。在這裡，我建議就是避免使用@import。因為@import會影響瀏覽器的並行下載，使得頁面在載入時增加額外的延遲，增添了額外的往返耗時。而且多個@import可能會導致下載順序紊亂。比如一個css檔案index.css包含了以下內容：@import url("reset.css")。那麼瀏覽器就必須先把index.css下載、解析和執行後，才下載、解析和執行第二個檔案reset.css。簡單的解決方案是使用<link>替代@import。

14.從PSD檔案思考怎麼寫代碼

接到，先不用著急切圖，先看下psd檔案。思考下怎麼排版，那些模組可以做成公用的模組，模組應該怎麼命名，寫樣式等！
當我們拿到設計師給的PSD時，首先不要急於寫CSS代碼，首先對整個頁面進行分析，先思考下面幾點：　　
(1)分析頁面有哪些模組是公用的，常見公用模組有頭部，底部，功能表列，懸浮按鈕等等　　
(2)分析模組有什麼樣式，把公用的樣式提取出來，公用樣式包括公用的狀態樣式，比如按鈕，輸入框，下拉框等公用的選中狀態，禁用狀態的樣式等等。

15.小表徵圖的處理方案

一個網站，肯定會有很多個小表徵圖，對於這些小表徵圖，目前的解決方案有兩個，cssSprite(雪碧圖)，字型表徵圖，把圖片轉成base64。下面對比一下這兩種方式！
cssSprite：把所有icon圖片合成一張png圖片，使用的是在，對節點設定寬高，加上bacgroud-position。以背景圖方式顯展示需要的icon，如果一個網站有20表徵圖，那麼就要請求20次，使用cssSprite，只需要請求一次，大大的減少了http請求。缺點就是管理不靈活，如果需要新增一個表徵圖，都需要改合并圖片的源檔案，表徵圖定位也要規範，不然容易幹擾圖片之間的定位！
字型表徵圖：簡單粗暴的理解就是把所有的表徵圖當成一個字型處理！這樣不用去請求圖片。一般是使用class來定義表徵圖，要替換表徵圖時，只需更換樣式名，管理方便，語意明確，靈活放大縮小，並且不會造成失真。但是只支援單色的圖片。
base64：另一種方案就是把小的icon圖片轉成base64編碼，這樣可以不用去請求圖片，把base64編碼直接整合到js或者css裡面，可以防止因為一些相對路徑，或者圖片被不小刪除了等問題導致圖片404錯誤。但是找個方式會產生一大串的base64編碼。一般來說，8K以下的圖片才轉換成base64編碼。如果把一張50K的圖片轉成base64編碼，那麼會產生超過65000個字元的base64編碼，字元的大小就已經是將近70K了！建議就是：8K以下的圖片才轉換成base64編碼。

16.不要在ID選取器前面進行嵌套或寫標籤

1.ID在頁面上本來就是唯一的而且人家權值那麼大，前方嵌套（.content #test）完全是浪費效能。以及多寫一些沒有意義的代碼！這個雖然是一句話，但是還是有人犯這樣的錯！
2.除了嵌套，在id的前面也不需要加標籤或者其它選取器。比如 p#test或者.test#test。這兩種方式完全是多餘的，理由就是ID在頁面就是唯一的。前面加任何東西都是多餘的！

17.把常用樣式抽封裝成公用樣式

把長段相同樣式提取出來作為公用樣式使用，比如常用的清除浮動，單行超出顯示省略符號，多行超出省略符號等等。

如下栗子

/*超出省略符號*//*<p class='text-ellipsis'></p>*/.text-ellipsis{  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}/*清除浮動*//*<p class='clearfix'></p>*/.clearfix:after {    display: block;    content: '';    clear: both;    height:0;}

18.css3動畫的最佳化

在我之前一篇文章（移動web開發問題和最佳化小結），也有寫過關於這個的最佳化建議，之前說的兩個建議是：
1.CSS3動畫或者過渡盡量使用transform和opacity來實現動畫，不要使用left和top。
2.動畫和過渡能用css3解決的，就不要使用js。如果是複雜的動畫可以使用css3+js（或者html5+css3+js）配合開發，效果只有想不到，沒有做不到。

下面補充一個：動畫不宜過多，尤其是手機網站，否則會出現效能的問題，比如cpu一下子就被佔用滿了，掉幀等。而且，不建議給每一個元素都使用硬體加速。

參考連結：
CSS Animation效能最佳化
css3動畫效能最佳化
CSS動畫之硬體加速
Web動畫

19.body設定最小寬度

這個是在PC站會出現的問題，應該大家都知道。下面簡單說一下!
比如下面的栗子，一個網站，頁面內容寬度是1200px。看著很正常，沒什麼特別

如果這個時候，把頁面視窗縮小。小於1200px，頁面出現捲軸，然後把捲軸拖到最右邊

這樣是不是就發現，頂部的圖片和背景有一部分是斷層了！解決這個問題也很簡單，就是給body加上min-width。值就是頁面寬度的值。body{min-width:1200px;}

重複上一步操作，無論怎麼改變瀏覽器視窗大小，都是正常的

之所以會出現這樣的問題，是因為，比如視窗縮小到900px的時候，小於內容寬度的1200px。就是出現橫向的捲軸，但是body的寬度是900px。這個時候，如果有元素（比片的灰色地區和粉紅色的圖片）是相對body的width設定100%，那麼實際上這些元素的寬度也就是900px。所以會出現斷層那些的視覺！解決方式就是給body加上min-width。讓body的寬度最小不會小於內容的寬度！

20.小結

關於我對css寫作建議和效能最佳化的一個總結，就到這裡了。css，絕對不是那種只要能用就行，或者只要能用css把布局弄好就行的一門語言。css給我的感覺，就是上手很簡單，但是如果想用好css，還是得花時間去研究。css或者css3，能夠最佳化的東西還有很多，用好css或者css3能夠少寫很多js代碼，做出來的東西也是很神奇，大家還是得繼續學習當中的知識！
如果大家覺得我文章有哪個地方寫得不好，寫錯了，歡迎指正。如果有什麼其它的建議，歡迎指點，讓大家互相交流，互相學習，一起進步！最後，祝大家節日快樂！