Войти с помощью github
Форум /

Обертки бывают двух типов:

  1. Про расположение блока относительно других блоков
  2. Про лейаут внутри блока

Когда сталкиваетесь с первым случаем, чаще всего подойдет микс (либо с элементом родителя, либо с элементом сетки). Например:

<div class="some-parent">
    <div class="my-something some-parent__something">...</div>
</div>

либо

<div class="grid">
    <div class="my-something grid__col">...</div>
</div>

Еще можно не экономить на лишних DOM-узлах и делать так:

<div class="grid">
    <div class="grid__col">
        <div class="my-something">...</div>
    </div>
</div>

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

Как делать не стоит: создавать модификаторы для кнопки, задающие margin и т.п. свойства. Такое позиционирование по смыслу не является частью универсального блока, а лишь его конкретного места использования. Да и модификаторов на всех не напасешься.

Если же обертка относится именно к данному блоку (скажем, позиционирование иконки внутри той самой универсальной кнопки или ограничитель по max-width для контента страницы), то это будет внутренний элемент inner:

<button class="button">
    <span class="button__inner">
        <span class="button__icon"></span>
    </span>
</button>

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