0

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

.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 ответ 1

1

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

2
  • Спасибо за ответ, он предельно понятен, что браузеру без разницы, но размер файла уменьшится, а это же плюс! Согласен, в сложном сайте десятки раз повторяются, тот же display: block; или float:left; или position: relative; и пр. и сотни раз стили color и background, поэтому и возникла мысль, что целесообразно объединить через запятую все классы с идентичными стилями. По второй части вопроса не подскажите? Есть инструменты умеющие в финале верстки оптимизировать CSS именно с группировкой классов и определенным стилем? А потом еще и одной строкой все это дело сделать)
    – Slava
    Commented 17 мар. 2020 в 21:18
  • 1
    Держите. ruhighload.com/client
    – fixer
    Commented 18 мар. 2020 в 10:52

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.