摘要：關(guān)于書寫順序位置自身文本動畫當然網(wǎng)上還有其他推薦的寫法，差別在于在文本前還是后。

關(guān)于CSS 書寫順序

位置  display float position transform 
自身  width height margin padding border background
文本  font text
動畫  transition animation

當然網(wǎng)上還有其他推薦的寫法，差別在于background在文本前還是后。

考慮原因

提高CSS的可閱讀性（團隊）
減少冗余代碼（手一抖或者中途被打斷，前后寫了一樣的屬性）
快速定位代碼塊，易維護
減少實現(xiàn)UI稿的疏漏點

實際感受下

/*思考下這段代碼是干嘛的*/
.pop-btn{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 49%;
    text-align: center;
    color: #3295f2;
    margin: 10px 0;
    font-size: 16px;
    float: left;
}

/*調(diào)整*/
.pop-btn{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 49%;
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #3295f2;
}

理論依據(jù)

和瀏覽器解析過程有關(guān)：先對DOM定位，然后解析自身屬性，然后解析內(nèi)部現(xiàn)象
和Mozilla官方建議的書寫順序類似

以上英文資料并未找到，技術(shù)博客中的兩種觀點供參考

帶瀏覽器前綴

-webkit-border-radius: 50px 20px;
border-radius: 50px 20px;

對調(diào)下順序會產(chǎn)生什么問題？

瀏覽器對某些CSS3屬性的實現(xiàn)和標準有些差異
未來這些瀏覽器可能會修復(fù)這些差異，向標準靠齊

精簡代碼

與瀏覽器默認的一致

div{
    width: 200px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
}

height的默認值就是auto

一般在需要抹掉前面的height定值才會用到

/*倫家奏是塊級元素*/
li{
    display: block;
}

/*偶是行內(nèi)替換元素，本身就可以設(shè)置寬高*/
input{
    display: inline-block;
    width: 100%;
    height: 24px;   
}   

行內(nèi)元素不能設(shè)置寬高，這種說法是不嚴謹?shù)?/p>

行內(nèi)替換元素 input img 
行內(nèi)非替換元素 span i strong

/*多個屬性組合出現(xiàn)，部分屬性會失效*/
span{
    display: inline;
    position: absolute;
    left: 20px;
    width: 50px;
    height: 20px; 
    border: 1px solid #DFDFDF;
}

Demo

類似的組合還有：

position: fixed; display: block;
position: absolute; float: left;

詳細判定規(guī)則：

減少一些令人迷惑，冗余的代碼，有助于日后的維護工作

精簡CSS代碼更是建立在對CSS屬性的充分熟悉的基礎(chǔ)上

移動端1px邊框問題

先說是不是

border:1px solid #DF;在移動端線條會比較粗，不能很好的還原UI。和原生應(yīng)用對比下便可發(fā)現(xiàn)。另外截圖用PS放大測量，發(fā)現(xiàn)確實有2或3個像素

再說為什么

設(shè)備像素

設(shè)備中一個最微小的物理部件，每一個設(shè)備像素都有自己的顏色值和亮度值

CSS像素

CSS像素是一個抽象的單位

與設(shè)備無關(guān)
標準的顯示密度下，一個CSS像素對應(yīng)著一個設(shè)備像素

繼續(xù)深入：設(shè)備獨立像素 設(shè)備像素比(devicePixelRatio） 深入理解viewport
UI經(jīng)常說的圖有點糊原因是什么 為什么IOS要用2x,3x圖 如何讓canvas繪圖更清晰 SVG為什么放大后也很清晰

該如何解決

在線Demo

原理：利用scale進行縮放

針對不同情形可以做特殊處理

固定寬度與自適應(yīng) 嘗試使用CSS做簡單的圖形 CSS3動畫性能

使用3D變換來開啟GPU，或will-change（后面細說）

GPU即圖形處理器，是與處理和繪制圖形相關(guān)的硬件。GPU是專為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計算而設(shè)計的，可以讓CPU從圖形處理的任務(wù)中解放出來，從而執(zhí)行其他更多的系統(tǒng)任務(wù)，例如，頁面的計算與重繪。

常用：transform: translateZ(0);

元素尺寸,位置變化(width,height,top,left)等，盡可能使用 transform
來替代。transform不會更改周圍元素的布局，減少瀏覽器重繪的成本

在線Demo

盡可能讓有動效的元素脫離文檔流(float,absolue,fixed)，減少重排

關(guān)于有動效的gif圖片

如果圖層中某個元素需要重繪，那么整個圖層都需要重繪。比如一個圖層包含很多節(jié)點，其中有個gif圖，gif圖的每一幀，都會重繪整個圖層的其他節(jié)點。所以這需要通過特殊的方式來強制gif圖屬于自己一個圖層（translateZ(0)或者translate3d(0,0,0)）

上面具體原理性知識大家再去查相關(guān)資料，深入理解

暖心的CSS3屬性及應(yīng)用

pointer-events 在線Demo：繼續(xù)解決1px邊框問題

看得見，摸不著（點不到）

use-select 在線Demo

禁止選擇文本，移動端禁止長按復(fù)制

image-set 兼容性

響應(yīng)圖片

設(shè)備像素比window.devicePixelRatio

 background-image: image-set( url(test@2x.png) 2x,    url(test@3x.png) 3x );

兼容性

will-change

之前動畫性能中有講到，3Dtransform會啟用GPU加速。我們實
際上不需要z軸的變化，欺騙瀏覽器，是一種不人道的做法。

will-change專為此而生，預(yù)先告訴瀏覽器，快做好準備，把 GPU兄弟拉來，我要變形了。

幾何老師說： 同學(xué)們注意，我要開始變形了...

兼容性

關(guān)于JS 不要做重復(fù)的工作

外部依賴資源統(tǒng)一管理
相同的代碼進行封裝：（業(yè)務(wù)，UI，工具方法）
能夠用代碼判定的配置，不要手動去改

JSHint 緩存問題

微信瀏覽器緩存較嚴重

測試環(huán)境下禁止瀏覽器緩存

版本號
文件指紋
發(fā)布新版本菜單配置項注意點

Vue條件渲染v-show與v-if的區(qū)別

v-show不支持