Через какой класс мне позиционировать Бэм элемент?

Question

[Артём]

Допустим у меня есть такое меню:

<nav class="menu">
        <ul class="menu__list">
          <li class="menu__item"><a href="" class="menu__link">Visiting</a></li>
          <li class="menu__item"><a href="" class="menu__link">Explore</a></li>
          <li class="menu__item"><a href="" class="menu__link">Video</a></li>
          <li class="menu__item"><a href="" class="menu__link">Gallery</a></li>
          <li class="menu__item"><a href="" class="menu__link">Tickets</a></li>
          <li class="menu__item"><a href="" class="menu__link">Contscts</a></li>
        </ul>
      </nav>

Судя по документации, через свойство "menu__item" мне стоит задавать только цвет/рамку и т.д. А позиционирование следует делать иначе, подскажите, как именно в моем случае это лучше делать?

И как позиционировать сам блок menu, ведь он не должен влиять на остальные блоки

Comments

[WapSter]

Нельзя задавать для независимых элементов, это блок. Элементам можно задавать отступы

[Артём]

WapSter, понятно, а самому блоку через что, он же не зависим

[WapSter]

Артём, внешними элементами

Answer 1

[Вадим]

Любая внешняя геометрия для блока задаётся через микс

Таким образом, у menu__item могут быть внешние отступы, такие как margin, например, потому что они элементы блока, а вот сам блок menu должен быть спозиционирован через микс.
Если, скажем, .menu вставляется в .header, то нужно дополнительно на .menu определить класс .header__menu, в котором и задать позиционирование.

Comments

[Артём]

Спасибо, то, что нужно было

[Realetive]

Не любая. Главное — чтобы позиционирование не было в блоке — это сделает его более «независимым».
Есть ли исключения? Да. Например, модальное окно по определению позиционируется относительно вьюпорта, а не разметки. Но поэтому это и исключение.
Микс же просто позволяет «сэкономить» на вложенности — вместо создания двух div'ов (например, один про оформление, второй — про «геометрию») — обобщить стили на одном:

.header {
  padding: 10px; /* это «внутренняя» геометрия, тут всё ок */
}

.header__menu {
  margin-left: 10px; /* «отодвигаем» внешние элементы на 10px слева. Это «внешняя геометрия»  */
}

.menu {
  padding: 5px;
}

<header class="header">
  <div class="header__menu">
    <ul class="menu"><!-- … --></ul>
  </div>
</header>

станет

<header class="header">
  <ul class="menu header__menu"><!-- … --></ul>
</header>