3й вариант - структура классов точно отображает вложенность элементов
Не пойдет - пункты меню отдельно от меню никто не переиспользует, да и li вне ul не возможны. Такое только возможно, если элементы имеют "богатый внутренний мир" (достаточно сложны, чтобы их вынести в отдельные блоки). Но здесь не тот случай.
1 и 2 варианты практически идентичны и оба применимы, но я бы выбрал 2 вариант, так как меню все таки лучше вынести в отдельный блок.
Ну и про миксы не забывайте - блок main-nav может быть и элементом родителя main__nav и вся внешняя геометрия (внешние отступы и позиционирование) применится к элементу
.main__nav, а не к блоку
.main-nav
<div class="main">
<nav class="main-nav main__nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#" class="main-nav__link">Home</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">Work</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">About us</a>
</li>
</ul>
</nav>
</div>
