What is the best way to name BEM classes in a menu?

Question

BEM

There is such a layout, with a fixed menu.


Class naming question. Which option is better?

First option

<header class="header">
  <a class="header__logo">
    <img class="header__logo-img" src="img/logo.png" alt="">
    <svg class="header__logo-name">
      <use xlink:href="img/sprite.svg#logo-name"></use>
    </svg>
  </a>
  <p class="header__title">Фонд изучения культурного наследия Индии</p>
  <nav class="header__nav">
    <ul class="header__nav-list">
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Услуги</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Мероприятия</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Школы танцев</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Партнеры и спонсоры</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Новости</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">О нас</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Культура Индии</a>
      </li>
      <li class="header__nav-item>
        <a class="header__nav-link" a href="#">Контакты</a>
      </li>
    </ul>
  </nav>
  <a class="header__email" href="mailto:[email protected]">[email protected]</a>
  <ul class="list-reset header__social">
    <li class="header__social-item">
      <a class="header__social-link" href="#">
        <img class="header__social-img" src="" alt="">
      </a>
    </li>
    <li class="header__social-item">
      <a class="header__social-link" href="#">
        <img class="header__social-img" src="" alt="">
      </a>
    </li>
    <li class="header__social-item">
      <a class="header__social-link" href="#">
        <img class="header__social-img" src="" alt="">
      </a>
    </li>
    <li class="header__social-item">
      <a class="header__social-link" href="#">
        <img class="header__social-img" src="" alt="">
      </a>
    </li>
  </ul>
  <a class="header__btn" href="#">Связаться</a>
</header>

It confuses me that although I didn’t use two underscores twice, I actually created an element element (header__social-link).

Second option

<header class="header">
  <a class="logo">
    <img class="logo__img" src="img/logo.png" alt="">
    <svg class="logo-name">
      <use xlink:href="img/sprite.svg#logo-name"></use>
    </svg>
  </a>
  <p class="header__title">Фонд изучения культурного наследия Индии</p>
  <nav class="nav header__nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a class="nav__link" a href="#">Услуги</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Мероприятия</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Школы танцев</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Партнеры и спонсоры</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Новости</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">О нас</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Культура Индии</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" a href="#">Контакты</a>
      </li>
    </ul>
  </nav>
  <a class="header__email" href="mailto:[email protected]">[email protected]</a>
  <ul class="social">
    <li class="social__item">
      <a class="social__link" href="#">
        <img class="social__img" src="" alt="">
      </a>
    </li>
    <li class="social__item">
      <a class="social__link" href="#">
        <img class="social__img" src="" alt="">
      </a>
    </li>
    <li class="social__item">
      <a class="social__link" href="#">
        <img class="social__img" src="" alt="">
      </a>
    </li>
    <li class="social__item">
      <a class="social__link" href="#">
        <img class="social__img" src="" alt="">
      </a>
    </li>
  </ul>
  <a class="header__btn" href="#">Связаться</a>
</header>

In the second option, everything seems to be semantically correct, but according to the layout, the logo, nav and social blocks are not used anywhere except in the header, so there is no point in separating them into separate blocks?
Or is there, but in terms of naming/structure rather than reuse?

Answer 1

The second option is preferable as it is more readable.