Тесты производительности кривого и прямого кода?

Question

[art style]

Поделитесь инфой, у кого есть тесты производительности, допустим 3000 строк CSS кода, с разным стилем написания.
допустим есть два кода
первый с кучей классов вложенных друг в друга(улучшает структуризацию и уменьшает производительность) теперь браузер испытывает адовые боли в плане проверки каждого правила на вложенность
.class > .class > .class > .class > .class и тд

и второй код

.class
.class
.class
.class
.class

у этого кода максимальная производительность но отсутствует структуризация

меня интересует какая разница в производительности данного кода и/или как ее проверить? как быстро браузер пережёвывает первый и второй код? есть ли такие тесты?

Answer 1

[art style]

нашел тесты на эту тему
https://habr.com/ru/post/244815/
https://benfrain.com/css-performance-revisited-sel...
https://www.scorp13.com/workflow/skorost-css-selek...

вкратце, длинные селекторы обрабатываются дольше, но "дольше" подразумевает доли секунды 10-30мс
написание кода -каждый селектор в отдельном блоке- может быть полезно для супер хайлоад проектов коих единицы
поэтому в 2021 году, не стоит над этим заморачиваться, и можно писать SASS каскадами

Answer 2

[Александр Булгаков]

используйте препроцессоры и планировщики типа gulp

Comments

[art style]

я использую sass и он в конце выдает мне такой вид

body .root .section_3 #pricelist-block .pricelist .pricelist-column .list-1 .list-content .fa-plus, body .root .section_3 #pricelist-block .pricelist .pricelist-column .list-2 .list-content .fa-plus, body .root .section_3 #pricelist-block .pricelist .pricelist-column .list-3 .list-content .fa-plus {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-image: url("../imgs/icons/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
}