Есть следующая конструкция, у многих классов - стили одинаковые:
.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 в привычном образе для отладки и редактирования?)
Надеюсь вопрос сформулировал понятно, благодарю за ответ!