Какой код CSS работает быстрее?

Question

[Влад Скляр]

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

<article id="Assembly">
	<section class="AssemblyHeader">
		<div class="AssemblyName">
			<h1>Title</h1>			
		</div>
	</section>
</article>

Какой из двух примеров будет быстрее? (Без учета длины названий id и class)
Первый вариант:

article section div h1 {
color: red;
}

Второй вариант:

article h1 {
color: red;
}

Третий вариант:

#Assembly h1 {
color: red;
}

Четвертый вариант:

#AssemblyName h1 {
color: red;
}

Пятый вариант:

#Assembly #AssemblyName h1 {
color: red;
}

(Есть глупые варианты, я знаю, если у вас есть другие варианты, буду рад их увидеть)

Comments

[Ярослав Иванов]

Можно узнать кому в голову пришло оптимизировать css стили ? и как вы поняли, что их надо оптимизировать ?

[Сергей delphinpro]

Могли бы просто загуглить. Тема достаточно пережёванная в интернетах.
https://vaden-pro.ru/blog/css/skorost-obrabotki-cs...

[Влад Скляр]

Ярослав Иванов, Когда нечем заняться)

[Влад Скляр]

Сергей, В интернете много что пишут, не нашел ничего конкретного именно с этими примерами, что в вопросе

Answer 1

[Иван]

<article id="Assembly">
  <section class="AssemblyHeader">
    <div class="AssemblyName">
      <h1 class="AssemblyName__title">EvilBeasts Ultimate Performance</h1>			
    </div>
  </section>
</article>

.AssemblyName__title{
color:red;
}

Comments

[Сергей delphinpro]

вот самый правильный вариант селектора. Жму руку!

[Влад Скляр]

Разве это не избыточное использование классов? Сам по себе тег уникален для страницы в плане SEO или я не прав?

[alvvi]

Влад Скляр, "избыточное использование классов" это что-то новое. Для стилей так тем более.

[Ярослав Иванов]

Влад Скляр, Вам надо проникнуться философией БЭМ.

[Сергей delphinpro]

Влад Скляр, Иногда небольшая избыточность не только не лишняя, но необходима. В плане дальнейшей поддержки.

[Сергей delphinpro]

Влад Скляр, к тому же, если

Сам по себе тег уникален для страницы в плане SEO или я не прав?

то и селектор достаточен h1 {}, без доп. идентификаторов =)
Это если говорить о вашем списке селекторов.

[Иван]

Сергей, спасибо)) пытаюсь прочувствовать философию БЕМа,перед тем как устраиваться на работу

[Влад Скляр]

Сергей, В данном примере конечно рациональнее обойтись только h1, но когда его использование необходимо в нескольких блоках сайта, то и приходиться оформлять каждый отдельно. Я поэтому и создал вопрос, чтобы найти баланс между захламлением кода тонной классов и быстротой его работы. Все равно, каждый новый класс - новый запрос, что влечет увеличение времени загрузки. Вроде как...

[Иван]

Влад Скляр, чаще всего на макетах h1 на всех страницах одинаковы)) то есть легче одним классом обойтись)) а если все заголовки имеют одинаковый вид? Не будите h2 и h3 прописавать стили по сто раз)) легче им задать тот же класс AssemblyName__title

[Иван]

Влад Скляр, ru.bem.info/methodology/quick-start

[Влад Скляр]

Иван, мб не правильно понял, но я в начале CSS уже объявлял h1-h6, а нужных мне модулях просто дописывал им доп стили. Меня интересовало само обращение при большой вложенности))

Answer 2

[Сергей delphinpro]

третий и четвертый - равнозначны. Они же самые быстрые из представленных

ps а длина названий вообще роли не играет.