Do several classes in an html tag always affect rendering performance?

Question

Enjoyed an interesting video on debugging rendering performance in Chrome devtools. In his lesson, Umar identifies the CSS class change in the tag htmlas the source of the rendering bottleneck. Devtools shows that changing this class potentially affects 3,874 elements in the DOM below htmland triggers an expensive operation recalculate style.

In the past, I added CSS classes to a tag, htmlor bodyas a convenient way to express page state at this level.

Your CMS can do this for the same purpose. For example, on a WordPress site, you can see a bunch of type classes post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hoverin the post tag body.

Should this practice be avoided? Or will it only affect rendering performance when classes are used in CSS rules?

Answer 1

It should only affect performance if CSS styles are applied to it.

Browser vendors spend a lot of time trying to maximize performance, so CSS rules are handled so that they can be scanned very efficiently for necessary rendering changes ... and even when applied, it tries to optimize the changes that will cause cascading reflow.