Как назвать классы по БЭМ?
Раз вы читали про БЭМ, то особо вдаваться в теорию не буду и притяну пример за уши и опишу как бы я думал и именовал HTML-элементы на примере логотипа.
Каждый сам выбирает по какой системе понимать: где блок, где элемент, а где модификатор. Как это делают в Яндексе описано в документации по БЭМ, я придержусь этого способа именования
Классы стоит присваивать после того как вы определились: это блок или элемент? А может вообще модификатор.
Расписываю на примере лого:
Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)
<div class="header"> <!-- Блок шапка -->
  <div class="header-logo"></div>
  <div class="header-information">
    <div class="social">  <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
      <div class="social-vk"></div>
      <div class="social-f"></div>
      <div class="social-r"></div>
    </div>

    <div class="header-btn"></div>
    <div class="header-btn header-btn--orange"></div> <!-- Изменили цвет кнопки -->
  </div>
</div>

<div class="content">
  <div class="profile"> <!-- блок profile может быть и не в блоке content, но если считаешь, что только в нем, то изменить на content-profile content-avatar и т.д-->
    <div class="profile-avatar"></div>
    <div class="profile-fio"></div>
  </div>

  ....
</div>

<div class="footer">
  ... какая-нибудь разметка
  <div class="social">  <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
    <div class="social-vk"></div>
    <div class="social-f"></div>
    <div class="social-r"></div>
  </div>
</div>