Какой вариант HTML разметки лучше?

Question

[Unknown]

Привет!
Я хотел бы знать какой вариант лучше для оптимизации и скорости работы кода?
Первый вариант, видел много раз похожую разметку:

<!-- Без оборачивания каждого "строчного" дескриптора в отдельный блок -->
<div class="some-class">
	<h1 class="some-class__h1">header</h1>
	<p class="some-class__p">description</p>
	<button class="some-class__button">click me</button>
</div>

Второй вариант, как пишу я:

<!-- Оборачиваю каждый "строчный" дескриптор в отдельный блок -->
<div class="some-class">
	<div class="some-class__h1">
		<h1>header</h1>
	</div>
	<div class="some-class__p">
		<p>description</p>
	</div>
	<div class="some-class__button">
		<button>click me</button>
	</div>
</div>

На мой взгляд второй вариант имеет очевидные преимущества. Но меня интересует разница именно в скорости обработки браузером того или иного подхода и какой из вариантов ближе к "стандартам" (возможно и такие есть).

Например, какой вариант будет работать быстрее если мы имеем HTML на 20 тыс строчек кода. Первый или второй вариант? Или разница столь мала и разметку можно делать любым способом?

Answer 1

[dom1n1k]

Не вижу ни одного достоинства у 2-го варианта. В чем смысл так делать?
По скорости - 1-ый, очевидно, быстрее (тупо меньше элементов), но разница пренебрежимо мала почти всегда, за исключением особо клинических случаев.

Comments

[Unknown]

Достоинства второго варианта на мой взгляд:

1. Лучше читабельность разметки.
   
2. Так блочная структура выглядит более явной.
   
3. Такие маленькие обертки более гибкие в стилизации
   ...
   

[Довольный Айтишникъ]

Richard, с читабельностью я бы поспорил, первый вариант намного приятнее

[dom1n1k]

Промежуточные обертки нужны, если в них вкладывается БЭМ-блок. Потому что блок должен знать только своё устройство, но ему нежелеательно вмешиваться в своё позиционирование.
А тут не блоки, а элементы вышестоящего блока. Причем если с заголовком ещё как-то можно за уши притянуть, то с кнопкой вообще нелогично смотрится.
Вот если сделать блок "кнопка" - тогда обертка обретет смысл.

[Unknown]

dom1n1k, окей, спасибо, этого достаточно :)

[Дмитрий]

dom1n1k, все зависит от задачи. Строчными элементами проще всего управлять, когда они имеют собственный блок. Невозможно строчному элементу дать height. Или блок с кнопкой должен иметь background. Я например иногда использую как 1-ю конструкцию, так и вторую. Не верно утверждать, что тут есть только одна истинная. Правильно было задать вопрос, для какой задачи хотите использовать оба эти варианта. И дело тут не только в БЭМ.

[dom1n1k]

Дмитрйи, если строчному элементу нужно дать фон, то это значит, что фон будет присвоен некому врапперу. Это нормальная практика, но! - тогда этот враппер и назвать нужно соотвествующе. То есть он будет не some-class__button, а некий условный some-class__buttons-wrapper или что-то подобное. А именно &__button он быть не может, потому что button - это только сам button и никто другой. А автор вопроса (вольно или невольно) подразумевает именно это. То есть в авторской постановке вопроса - истина всё-таки одна.