2

I was wondering what impact on parsing and rendering performance may have to group rules in CSS.

Approach 1:

.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;
}

vs approach2:

.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;
}

Of course, we are talking about large css files with same rules grouping, so the same selector is fragmented into plenty of chunks sometimes.

Does it impact css parsing and rendering significantly enough to abandon this approach in favour of bigger file, but cleaner and gathering all rules in one selector?

Selector matching may be expensive. In real life case, each of those selectors is not just one class, but 2-3 nested classes. So for each element browser has to match selector three times to apply all rules. First for margin, then for padding, then apply color. The second approach seems very expensive.

kali187
  • 139
  • 6
  • Also, grouping is taken to a very extreme level. Not grouping by logic of similar elements, but literally all elements having the same rule value. In my opinion, it's overDRYed. – kali187 Aug 24 '17 at 09:46
  • overDRYing is a bad practice too http://joelabrahamsson.com/the-dry-obsession/ – kali187 Aug 24 '17 at 09:53

3 Answers3

2

I've prepared two codepens with two options:

Approach 1 (one selector per class) - https://codepen.io/kali187/pen/EvpVdb - (just output: 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;
  }
}

Approach 2 (multiple selectors for one class) - https://codepen.io/kali187/pen/dzjGPa - (just output: 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;
  }
}

Results of rendering for the first approach: enter image description here Parsing styles and html ~ 25ms

Results of rendering for the second approach: enter image description here Parsing styles and html ~ 75ms (3 times that long)

If anyone would like to test it, please do

kali187
  • 139
  • 6
  • Nice work, but I don't think is right! After those tests you compared just `Parse Html` but overall performance looks better on the second test! Maybe it took longer to parse html, but less to render! I think this is an important question, maybe you or someone else tries those tests as for 2021. – Sorin GFS Feb 28 '21 at 18:52
0

Group. This makes your CSS file neat and clear. It improve your rendering performance too. Writing same things again and again is not a good practice.

Salman Ahmed
  • 682
  • 1
  • 10
  • 24
  • I know the clean code benefits of approach 2, plus seems more DRY. But my question is about actual browser performance and rendering impact. Did anyone measure this exact thing? – kali187 Aug 24 '17 at 09:35
  • Selector matching may be expensive. In real life case, each of those selectors is not just one class, but 2-3 nested classes. So for each element browser has to match selector three times to apply all rules. First for margin, then for padding, then apply color. Seems expensive. – kali187 Aug 24 '17 at 09:39
0

If you have the same property in the project in many places, add the class. Or group.

PerniCZek
  • 1
  • 1
  • I know. I wanted to know the performance impact. Apparently extensive grouping can impact performance. P.S. We can't add visual classes. we use BEM, not OOCSS – kali187 Aug 24 '17 at 10:58