移動端性能優化（CSS性能優化）

CSS性能優化

CSS選擇器優化

如果可以直接選中元素，不需要加一些多餘的修飾

        /*不要使用類選擇器和ID選擇器修飾元素標簽，這樣多此一舉，還會降低效率。*/
        div#slider.slider {

        }

一般來說，class用於樣式，id用於js，因為id定義的樣式不利於復用

保證不會誤選的情況下，儘量保持簡單

避免衝突可以在命名時區分好

        /*保持簡單，不要使用嵌套過多過於複雜的選擇器*/
        /*瀏覽器從右向左解析CSS*/
        /*.slider .slider-item-container .slider-item .slider-link .slider-img {
            width: 100%;
        }*/
        .alex-slider-img {
            /*嵌套少*/
            /*權重低 便於使用的時候覆蓋*/
            width: 100%;
        }

儘量少用通配符選擇器，可以單獨寫出來，羅列出來

        /*避免通配選擇器*/
        * {

        }
        ul, li, dl, dt, dd, p {
            padding: 0;
            margin: 0;
        }

不必要的樣式和沒有用到的樣式直接刪除即可

        /*移除無匹配的樣式*/
        .slider {
            /*width: 100%;*/
        }

高級選擇器少用（類似正則的），還有屬性選擇器，性能並不高

但是必須的情況下可少量使用

        /*避免類正則的屬性選擇器*/
        [class*="slider-indicator"] {

        }
        [class~="slider-indicator"] {
            /*空格分隔*/
        }
        [class^="slider-indicator"] {
            
        }
        [class$="slider-indicator"] {
            
        }

css屬性優化：

不同類里存在相同樣式可以提取出來一起寫，減少冗餘

而且方便統一修改

        /*提取公用部分*/
        .slider,
        .slider-item-container {
            width: 100%;
            height: 100%;
        }

合併一些可以合併的元素

上右下左

適當使用簡寫

        /*合寫*/
        .slider {
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: 20px;
            margin-left: 20px;

            margin: 10px 20px 10px 20px;
            margin: 10px 20px;
            margin: 10px 20px 10px;

            background-color: #fff;

            font-size: 12px;
            font: ;
        }

其他優化：

不建議使用CSS @import引用載入CSS（scss里沒關係）

做動畫時優先使用css3動畫，其次再考慮js動畫

移動端優先考慮flex佈局，少用float