Realetive

Выглядит так, словно это два независимых элемента того же блока. Значит ли это, что "menu__icon" должен быть способен существовать вне "menu__item"?

<nav class="menu menu_outside-icon">
  <i class="menu__icon"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu_outside-icon .menu__icon {
  margin-right: 0;
}

<nav class="menu">
  <i class="menu__icon menu__icon_outside"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu__icon_outside {
  margin-right: 0;
}

<nav class="menu">
  <a class="link link_no-decoration menu__item" href="#!">
    <i class="icon icon_size_m menu__icon"></i>
    Main
  </a>
</nav>

.menu__item {
  padding: 1rem 2rem;
}

.menu__icon {
  margin-right: 0.5rem;
}

.link {
  color: blue;
}

.link_no-decoration,
.link_no-decoration:hover,
.link_no-decoration:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.icon {
  color: inherit;
  line-height: 1;
}

.icon_size_m {
  width: 1.5rem;
  height 1.5rem;
}

.header__menu.menu .menu__item {
  /* … */
}

.menu_view_header .menu__item {
  /* … */
}

{
  logo: {
    img: 'путь до картинки',
    text: '…',
  },
  contacts: [
    'телефон',
    'email',
    'график работы',
    'адрес',
    'соц. сети',
    'кнопка обратной связи',
  ],
  navigation: [
    'пункт меню…',
    'пункт меню…',
    'пункт меню…',
  ]
}

// Блок логотипа
{
  logo: [
    { img: '…' },
    { text: '…' },
  ]
}

// Блок контактов
{
  contacts: [
    { tel: '…' },
    { email: '…' },
    { schedule: '…' },
    { address: '…' },
    { socials: [
      { vk: '…' },
      { telegram: '…' },
      { instagram: '…' },
    ] },
    { map: '…' },
    { feedback: '…' },
  ]
}

// Блок навигации
{
  navigation: [
    { item: '', link: '…' },
    { item: '', link: '…' },
    { item: '', link: '…' },
  ]
}

// Блок «Шапки»
{
  header: [
    {
      logo: [] // Тут всё без изменений
    },
    {
      contacts: [
        'tel',
        'email',
        'schedule',
        'address',
        'socials',
        'feedback',
      ]
    },
    {
      navigation: [] // Тут тоже без изменений
    }
  ]
}

// Блок «Подвала»
{
  footer: [
    {
      logo: [] // Тут всё без изменений
    },
    {
      navigation: [ // Тут почти без изменений
        // …
        'Марки автомобилей' // Без выпадающего списка
        // …
      ]
    },
    {
      contacts: [
        'tel',
        'email',
        'address',
        'socials',
        'schedule', // Без иконки
      ]
    },
  ]
}

// Блок логотипа
{
  block: 'logo'
  content: [
    { elem: 'img', src: '…' },
    { text: '…' },
  ]
}

// Блок контактов
{
  block: 'contacts'
  content: [
    { elem: 'tel', content: '…' },
    { elem: 'email', content: '…' },
    { elem: 'schedule', content: '…' },
    { elem: 'address', content: '…' },
    { elem: 'socials', content: [
      { elem: 'vk', content: '…' },
      { elem: 'telegram', content: '…' },
      { elem: 'instagram', content: '…' },
    ] },
    { elem: 'map', content: '…' },
    { elem: 'feedback', content: '…' },
  ]
}

// Блок навигации
{
  navigation: [
    { item: '', link: '…' },
    { item: '', link: '…' },
    { item: '', link: '…' },
  ]
}

// Блок «Шапки»
{
  header: [
    {
      block: 'logo'
    },
    {
      block: 'contacts',
      // У этого блока определённо свой контент,
      // будем отличать его от других вариантов
      // этого блока с помощью модификатора
      mods: { view: 'header' },
      content: [
        { elem: 'tel' },
        { elem: 'email' },
        { elem: 'schedule' },
        { elem: 'address' },
        { elem: 'socials' },
        { elem: 'feedback' },
      ]
    },
    {
      block: 'navigation',
      // Этот блок по внешнему виду отличается от блока в «Подвале»,
      // поэтому обозначим его модификатором
      mods: { view: 'header' },
      content: [
        // …
        // У одного пункта выпадающий список
        {
          elem: 'item',
          item: 'Марки автомобилей',
          elemMods: { dropdown: true },
          content: [
            // …
            { elem: 'subitem', item: 'Infinity', href: '…' }
          ]
        },
        // …
      ]
    }
  ]
}

// Блок «Подвала»
{
  footer: [
    {
      block: 'logo'
    },
    {
      block: 'navigation',
      mods: { view: 'footer' },
      content: [ // Тут почти без изменений
        // …
        { elem: 'Марки автомобилей', link: '…' }, // Без выпадающего списка
        // …
      ]
    },
    {
      contacts: [
        'tel',
        'email',
        'address',
        'socials',
        { elem: 'schedule', elemMods: { noIcon: true } }, // Без иконки
      ]
    },
  ]
}

.page__section.page__section_view_feedback
  .page__layout
    .form.form_view_feedback.page__column_width_half (миксуем блок формы обратной связи и лэйаут 1/2 колонки)
      …
    .contacts_view_feedback.page__column_width_half
      .contacts__info
        .contacts__address
        .contacts__email
        .contacts__tel
        .contacts__schedule
      .contacts__map

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader

Вообще, разделить на слои всё, это есть хорошо?

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz

<header class="header">
  <div class="header__logo"><!-- … --></div>
  <div class="header__menu">
    <ul class="menu"><!-- … --></ul>
  </div>
</header>
<!-- … -->
<footer class="footer">
  <div class="footer__logo"><!-- … --></div>
  <div class="footer__menu">
    <ul class="menu"><!-- … --></ul>
  </div>
</footer>

.header__menu {
  margin-left: 20px;
}
.footer__menu {
  margin-left: 30px;
}

<div class="site">
  <header class="header">
    <div class="header__container container">
      <div class="header__inner">
        <a class="logo header__logo" src="/"><img class="logo__img img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
        <nav class="nav" role="navigation">
          <a class="nav__link link" src="#">Buy Instagram Likes</a>
          <a class="nav__link link" src="#">Buy Instagram Followers</a>
          <a class="nav__link link" src="#">Buy Instagram Views</a>
          <a class="nav__link link" src="#">Get Free Likes</a>
          <a class="nav__link link" src="#">Instagram Downloader</a>
          <a class="nav__link link" src="#">Support</a>
        </nav>
      </div>
    </div>
  </header>
  <section class="banner">
    <div class="banner_container container">
      <div class="banner__inner">
        <div class="banner__info">
          <h1 class="banner__title heading heading_size_l">Get Real Instagram likes, followers and views!</h1>
          <p class="banner__paragraph paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
          <p class="banner__paragraph paragraph">Grow your instagram account quickly with Likigram</p>
        </div>
        <div class="banner__actions">
          <img class="img banner__img" src="images/banner-img-1.png" alt="banner img">
          <a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer_container container">
      <div class="footer__inner">
        <div class="footer__info">
          <div class="logo footer__logo"><img class="img logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
          <div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
          <div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
        </div>
        <div class="footer__menu">
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Contact Us</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Support</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Blog</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Terms and Conditions</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Privacy Policy</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Refund Policy</a></li>
          </ul>
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Views</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Instagram Downloader</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">About Likigram</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

1. site:css-tricks.com bem
   
2. site:csswizardry.com bem
   
3. site:smashingmagazine.com bem
   

<!-- Первый слайдер -->
<div class="slider slider_promo">
    <div class="slider__track">
        <div class="slider__slide"></div>
    </div>
    <div class="slider__arrows"></div>
</div>

<!-- Второй слайдер -->
<div class="slider slider_grid">
    <div class="slider__meta">
        <div class="slider__description"></div>
    </div> 
    <div class="slider__track">
        <div class="slider__slide"></div>
    </div>
    <div class="slider__arrows"></div>
</div>

.work-item__model-1::before {
  content: '';
  /* … */
}