Есть ли разница производительности из-за кол-ва class в одном правиле css?

Question

[Denis Verbin]

Есть css файл с цветами сайта.

#header a {
  color: aaa;
}
#menu a:hover {
  color: aaa;
}
#content a, #content li {
  color: aaa;
}

и так примерно пол тысячи стилей с одним и тем же цветом. Не ударит ли по производительности браузера если объединить их в один блок?

#header a, #menu a:hover, #content a, #content li {
  color: aaa;
}

Comments

[Александр Симонов]

Вы серьёзно думаете, что ~500 - это много?

[Denis Verbin]

Александр Симонов, Я серьезно думал что JS способен при загрузке страницы найти и заменить color: aaa на color: bbb в стилях незаметно для пользователя, а не 5+ секунд, потому теперь ничему не удивлюсь.

Я правильно понимаю, можно объединять правила css стилей сколько угодно?
500 отдельных правил = одному с указанием 500 классов?

[Andrej Sharapov]

Denis Verbin, вроде того. Вы можете заверстать весь сайт, а спустя месяцы, вам вздумается сделать, например, круглые углы в блоках. Представьте, сколько времени вы потратите, пока будете искать все классы и создавать кучу новых строк. Просто берете и пишите где нибудь все нужные классы и им присваиваете

.class1,.class2,.class3,...,.class999 {
border-radius: .25rem;
}

[Ankhena]

и так примерно пол тысячи стилей с одним и тем же цветом.

Что-то тут не так с логикой верстки.

Варианты:
- задавать цвет родительскому элементу
- создать класс с цветом и применять его там, где нужно
- какой-нибудь еще вариант, если покажете макет/сайт.

Answer 1

[Andrej Sharapov]

Если есть возможность, а потом сможете в этом разобраться, то объединяйте. Десяток стилей разницы значительной не дадут, но если таких много, стоит объединить. Вес файла значительно уменьшится. Не зря же мы боремся за это, особенно создавая min файлы.