Ускоряется ли загрузка страницы если объединять в CSS все селекторы и классы с одинаковыми стилями через запятую?

Есть следующая конструкция, у многих классов - стили одинаковые:

.oneclass {
  display: block;
  background: #f1f1f1;
  border-radius: 6px;
  margin: 10px 20px;
  padding: 15px;
  width: 50%
}

.twoclass {
  display: block;
  background: #000;
  color: #fff;
  border-radius: 6px;
  margin: 10px 20px;
  padding: 15px;
  width: 40%
}

.threeclass {
  display: block;
  background: #b50000;
  border-radius: 6px;
  margin: 10px 20px;
  padding: 15px;
  width: 30%
}
<div class="oneclass">Блок 1 </div>
<div class="twoclass">Блок 2 </div>
<div class="threeclass">Блок 3 </div>

Есть ли смысл объединять классы через запятую и указывать одинаковый для данной группы стиль. Пример:

.oneclass,
.twoclass,
.threeclass {
  display: block;
  border-radius: 6px;
  margin: 10px 20px;
  padding: 15px;
}

.oneclass {
  width: 50%;
  background: #f1f1f1;
}

.twoclass {
  background: #000;
  width: 40%;
  color: #fff;
}

.threeclass {
  background: #b50000;
  width: 30%
}
<div class="oneclass">Блок 1 </div>
<div class="twoclass">Блок 2 </div>
<div class="threeclass">Блок 3 </div>

Ускорит ли это загрузку страницы? Или наоборот если через запятую будут указаны к примеру: блок из 50 классов имеющих одинаковый стиль, затем следующий блок из 30 классов с другим стилем и т.д. для браузера это будет более затратная по времени процедура построения страницы?

Стоит ли в этом ключе оптимизировать CSS или мощность современных компьютеров нивелирует все эти усилия по оптимизации? Хочется понять, есть ли браузеру разница как построить страницу взять определенный класс и применить к нему все стили записанные подряд или если же стили будут разбросанные по всему CSS но сгруппированы классы к которым нужно применить тот или иной стиль ?

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

Надеюсь вопрос сформулировал понятно, благодарю за ответ!


Ответы (1 шт):

Автор решения: fixer

Вообще, CSS движок браузеров очень быстрый, разница при построении CSS Object Model перечисленных вами методов очень маленькая. Здесь гораздо больше будет влиять размер файла и время его загрузки. В этом случае обьединение классов полезно, размер файла уменьшается. Но это не всегда хорошая практика с точки зрения поддержки кода.

→ Ссылка