CSSのパフォーマンス - グループ化するかしないか？

Question

解析とレンダリングのパフォーマンスにどのような影響があり、CSSのルールをグループ化する必要があるのでしょうか。

アプローチ1：approach2対

.class1 { 
    margin: 10px; 
    padding: 20px; 
    color: #ccc; 
} 
.class2 { 
    margin: 10px; 
    padding: 30px; 
    color: #ddd; 
} 
.class3 { 
    margin: 20px; 
    padding: 30px; 
    color: #eee; 
} 
.class4 { 
    margin: 20px; 
    padding: 20px; 
    color: #fff; 
} 

：もちろん

.class1, 
.class2 { 
    margin: 10px; 
} 
.class3, 
.class4 { 
    margin: 20px; 
} 
.class1, 
.class4 { 
    padding: 20px; 
} 
.class2, 
.class3 { 
    padding: 30px; 
} 
.class1 { 
    color: #ccc; 
} 
.class2 { 
    color: #ddd; 
} 
.class3 { 
    color: #eee; 
} 
.class4 { 
    color: #fff; 
} 

、我々は同じ規則がグループを持つ大規模なCSSファイルについて話しているため、同じセレクタは時々塊の多くに断片化されます。

これは、このアプローチを放棄してより大きいファイルを好むほど大きく改善しますが、1つのセレクタですべてのルールを掃除して収集することに十分に影響しますか？

セレクタのマッチングは高価な場合があります。実際のケースでは、これらのセレクタはそれぞれ1つのクラスではなく、2-3つのネストされたクラスです。したがって、各要素ブラウザでセレクタを3回一致させると、すべてのルールが適用されます。最初にマージンを、次にパディングを行い、次にカラーを適用します。第2のアプローチは非常に高価に見える。

Answer 1

グループ。 これはあなたのCSSファイルをきれいにします。レンダリングのパフォーマンスも向上します。同じことを何度も繰り返し書くことは良い習慣ではありません。

Answer 2

プロジェクト内で同じプロパティが複数の場所にある場合は、そのクラスを追加します。 またはグループ。

Answer 3

Iの2つのオプションを持つ2つのcodepens用意しました：

アプローチ1（クラスごとに1つのセレクタ） - https://codepen.io/kali187/pen/EvpVdb - （ちょうど出力：https://codepen.io/kali187/live/EvpVdb）

@for $n from 1 through 2000 { 
    .div-#{$n} { 
     float: left; 
     background: rgb($n, $n, $n); 
     height: 10px + 1px * $n/2; 
     width: 20px + 1px * $n/5; 
     margin: 0 1px 1px 0; 
     border: 1px solid #f00; 
    } 
} 

アプローチ2（複数のセレクタを1クラス） - https://codepen.io/kali187/pen/dzjGPa - （ちょうど出力：https://codepen.io/kali187/live/dzjGPa）

$max: 1000; 

@for $i from 1 through $max { 
    %bg-#{$i} { 
    background: rgb($i, $i, $i); 
    } 
    %width-#{$i} { 
    width: 20px + 1px * ceil($i/5); 
    } 
    %height-#{$i} { 
    height: 20px + 1px * ceil($i/3); 
    } 
} 

@for $n from 1 through (2*$max) { 
    .div-#{$n} { 
     float: left; 
     @extend %bg-#{ceil($n/2)}; 
     @extend %width-#{ceil($n/3)}; 
     @extend %height-#{ceil($n/4)}; 
     margin: 0 1px 1px 0; 
     border: 1px solid #f00; 
    } 
} 

最初のアプローチのためのレンダリングのの

結果： スタイルとHTMLを解析〜第二のアプローチのレンダリングの25msの

結果： スタイルとHTML〜75msの（長い3回）

の解析

誰かがテストしたい場合は、