Does BEM require inline elements to be wrapped in an additional block tag?

Question

css

Hello.
I watched this video about the BEM layout methodology: https://youtu.be/q1tdG7EIGa8
In this video , the , and (inline and inline-block) elements are wrapped by the author in an additional . Example #1:<button><img><a><div>

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

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

Example #2:

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

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

Example #3:

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

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

This clogs up the code quite a bit and increases nesting.
And it is not clear whether it is justified.
Question:
Please help me understand, is this design of elements in additional ones the right approach, the advantages of which I simply do not understand, or one of the design options that is not mandatory? Thanks <div>

Answer 1

in general, everything used to be made up on divs. but now it is not very popular. so if you can do without the extra div - don't use this div.
ps perhaps the author of your course on YouTube is just a seasoned layout designer with 20+ years of experience and doesn't want to quit layout on divas.