Нужно ли по БЭМ строчные элементы оборачивать в дополнительный блочный тег?

Question

[Рома Зварич]

Здравствуйте.
Посмотрел это видео про БЭМ-методологию верстки: https://youtu.be/q1tdG7EIGa8

В этом видео элементы <button>, <img> и <a> (строчные и строчно-блочные) автор почему-то оборачивает в дополнительный <div>.

Пример №1:

<!-- Вместо -->
<img class="logo header__logo" src="pic.jpg">

<!-- Автор указывает -->
<div class="logo header__logo">
    <img class="logo__img" src="pic.jpg">
</div>

Пример №2:

<!-- Вместо -->
<a class="phone header__phone" href="">[phone]</a>

<!-- Автор указывает -->
<div class="header__phone">
    <a class="phone" href="">[phone]</a>
</div>

Пример №3:

<!-- Вместо -->
<button class="button header__button">Позвонить</button>

<!-- Автор указывает -->
<div class="header__button">
    <button class="button">Позвонить</button>
</div>

Это неслабо засоряет код и увеличивает вложенность.
И непонятно, обоснованно ли.

Вопрос:
Помогите пожалуйста понять, подобное оформление элементов в дополнительные <div> - это правильный подход, преимущества которого я просто не понимаю или один из вариантов оформления, который не является обязательным?
Спасибо

Comments

[Rustam Bainazarov]

В BEM ничего про это не сказано, что логично. Просто тут, видимо, нужна доп. обёртка, чтобы достичь визуального соответствия макету.

Как и зачем BEM будет препятствовать задаче разместить несколько inline-элементов? Просто тут, видимо, это было нужно с точки зрения дизайна.

[Сергей delphinpro]

На последнем примере покажу:
Место под кнопку в шапке может быть отведено в процентном отношении

.header__button {
  width: 30%;
  text-align: right;
}

При этом сама кнопка не должна занимать весь блок, а быть размером по тексту в ней.

Очевидно, что кнопку следует положить внутрь отведенного контейнера.

Аналогично с ссылками и картинками.

Это неслабо засоряет код и увеличивает вложенность.

Не слабо засоряет код, например, элементор в вордпрессе. А здесь парочка дополнительных оберток - это нормально.

Answer 1

[Иван]

вообще раньше действительно всё верстали на дивах. но сейчас это не особо популярно. поэтому если вы можете обойтись без лишнего дива - не используйте этот див.
p.s возможно автор вашего курса в ютубе просто прожженный верстальщик со стажем 20+ лет и не хочет бросать верстать на дивах.

Comments

[Rustam Bainazarov]

Без понимания дизайна так говорить нельзя. Вы уверены, что в данном случае ему нужно inline-отображение? Уверены, что он обёртками не хочет разграничить зоны? В примере логотипа, где есть обертка, а уже внутри img, — это абсолютно нормальная практика.

[strelok011]

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

[Иван]

strelok011, ну ладно если дивами обложат 1-2 блока на сайте, но вероятнее всего с таким подходом весь html будет в сплошных дивах

[strelok011]

BenderIsGreat34 это можно только по результату смотреть. Обоснован ли данный конкретный тег в боевых условиях.