解析とレンダリングのパフォーマンスにどのような影響があり、CSSのルールをグループ化する必要があるのでしょうか。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のアプローチは非常に高価に見える。
また、グループ化は非常に極端なレベルになります。類似の要素のロジックではなく、文字通り同じルール値を持つすべての要素でグループ化します。 私の意見では、それはoverDRYedです。 – kali187
overDRYingも悪い習慣です http://joelabrahamsson.com/the-dry-obsession/ – kali187