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（其它不清楚了）！那麼div.test-class權值就是11，div#test就是101

好比有一個div

<div id="test" class="test-class" style="color:green;"></div>
複製代碼

那麼樣式權值方面就是

div {color: red !improtant;}（大於下面的一切）
<div id="test" class="test-class" style="color:black;"></div>（大於111）
div#test.test-class（111）
#id.test-class（110）
div#test（101）
#test（100）
div.test-class（11）
.test-class（10）
div（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

這個方式不推薦使用，由於這個寫法，.div2的寬高必需要設置，不然就是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的元素，好比div，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的前面也不須要加標籤或者其它選擇器。好比 div#test或者.test#test。這兩種方式徹底是多餘的，理由就是ID在頁面就是惟一的。前面加任何東西都是多餘的！

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

把長段相一樣式提取出來做爲公用樣式使用，好比經常使用的清除浮動，單行超出顯示省略號，多行超出省略號等等。

以下栗子

/*超出省略號*/
/*<p class='text-ellipsis'></p>*/
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*清除浮動*/
/*<div class='clearfix'></div>*/
.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代碼，作出來的東西也是很神奇，你們仍是得繼續學習當中的知識！
若是你們以爲我文章有哪一個地方寫得很差，寫錯了，歡迎指正。若是有什麼其它的建議，歡迎指點，讓你們互相交流，互相學習，一塊兒進步！最後，祝你們節日快樂！

-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣