Realetive

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

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

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

<header class="header header_theme_dark">
  <div class="header__heading">
    <h1 class="heading heading_size_xxl heading_theme_dark">
      Hello kitty
    </h1>
  </div>
</header>

<header class="header header_theme_light">
  <div class="header__heading">
    <h1 class="heading heading_size_xxl heading_theme_light">
      Hello kitty
    </h1>
  </div>
</header>

<div class="container">
  <div class="container__main">
    <div class="row">…</div>
  </div>
  <div class="container__aside">
    <div class="notations">…</div>
  </div>
</div>

- товар
  - фотография
  - цена
  - старая цена
  - размеры

<article class="namely">
  <img class="namely__photo" src="...">
  <dl class="namely__prices">
    <div class="namely__price">
      <dt class="visually-hidden">Новая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">311</dd>
    </div>
    <div class="namely__price namely__price_old"> <!-- Модификатор «опишет» цвет и «зачёркнутость» -->
      <dt class="visually-hidden">Старая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">450</dd>
    </div>
  </dl>
  <div class="namely__sizes">
    <h4 class="namely__sizes-heading">Выберите размер</h4>
    <div class="namely__sizes-list">
      <label class="namely__size">
        S
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="s">
      </label>
      <label class="namely__size">
        M
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="m">
      </label>
      <!-- … и т. д. -->
    </div>
  </div>
</article>

1. определим базовый блок
   

   <div class="header">
     <div class="header__logo"></div>
     <div class="header__nav"></div>
   </div>

   
   
   

   .header {
     background-color: red;
     display: flex;
   }
   
   .header__logo {
     width: 180px;
   }
   
   .header__nav {
     flex: 1; /* вся оставшаяся ширина */
   }

   
   
   
2. логотип — самостоятельный блок, может использоваться, например, в футере. Я сразу использовал микс на header__logo, но для базового понимания можно внутри header__logo сделать самостоятельный — за счёт БЭМ это ни на что не повлияет.
   
   

   <div class="header">
     <div class="header__logo logo">
       <img src="" alt="logo of top digital …" class="logo__image">
       <img src="" alt="Top digital …" class="logo__text">
     </div>
     <div class="header__nav"></div>
   </div>

   
   
   

   .logo {
     display: flex;
     justify-content: space-between;
   }
   
   .logo__image {
     flex: 1;
   }
   
   .logo__text {
     width: 75%;
   }

   
   
   За счёт flex-модели logo__image можно использовать без logo__text, получим просто иконку-логотип.
   
   
   
3. добавляем меню
   

   <div class="header">
     <div class="header__logo logo">
       <img src="https://via.placeholder.com/43x43" alt="logo of top digital …" class="logo__image">
       <img src="https://via.placeholder.com/134x15" alt="Top digital …" class="logo__text">
     </div>
     <nav class="header__nav nav">
       <ul class="nav__menu list list_of_menu">
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
       </ul>
     </nav>
   </div>

   
   
   

   .list_of_menu {
     list-style: none;
   }
   
   .nav__menu {
     display: flex;
   }
   
   .nav__menu-item + .nav__menu-item {
     margin-left: 1em;
   }
   
   .nav__link {
     color: white;
     text-decoration: none;
   }

   
   
   
4. скорее всего ширина содержимого у header совпадает с шириной содержимого других частей страницы (то, что иногда называют 12-колоночной вёрсткой) — заведём отдельный класс для этого, например, content и обозначим, какое именно содержимое подчиняется этой ширине
   

   <div class="header">
     <div class="header__content content">
       <div class="header__logo logo">
         <!--        -->
       </div>
       <nav class="header__nav nav">
         <!--        -->
       </nav>    
     </div>
   </div>

   
   
   

   .content {
     width: 800px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
   }

   
   
   
   
   Результат: https://codepen.io/Realetive/pen/GRoOzeg

<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;
}