Войти с помощью github
Форум /

Допустим у меня вот такая вёрстка header'а

<header class="page__header header">
  <nav class="header__nav nav">
    <ul class="nav__links">
      <li class="nav__item">
        <a href="#" class="nav__link"></a>
      </li>
    </ul>
  </nav>
</header>

Как мне это разбить на блоки header, nav и их элементы? Использую handlebars. Если я напишу шаблон для блока header, будет вот так, верно?

<header class="page__header header">
  {{>nav/nav.hbs}}
</header>

Начав писать шаблон, я столкнулся с проблемой, во первых - создавая новый блок, который входит в другой блок, как мне реализовать миксы - внешнюю геометрию и позиционирование как я могу писать класс header__nav, если nav допустим не всегда используется как элемент header'а?

В итоге получается примерно вот так. Получается что каждая html вложенность это импорт, это нормально? Я только начинаю знакомиться с методологией и шаблонизаторами

index.hbs

<body class="page">
  {{>header/header.hbs}}
  {{>article/article.hbs}}
  {{>footer/footer.hbs}}
</body>

header.hbs

<header class="page__header header">
  {{>nav/nav.hbs}}
</header>

nav.hbs // вот именно здесь главный вопрос с классом header__nav, куда мне его девать если nav не должен быть зависим от header'a?

<nav class="??header__nav?? nav">
  {{>nav/__links/nav__links.hbs}}
</nav>

nav__links.hbs

<ul class="nav__links">
  {{#each nav__links}}
  {{>nav/__item/nav__item.hbs}}
  {{/each}}
</ul>

nav__item.hbs

<li class="nav__item">
  {{>nav/__link/nav__link.hbs}}
</li>

nav__link.hbs

<a href="#{{this.link}}" class="nav__link">{{this.text}}</a>

На вход я подаю вот по типу таких данных например, типовая навигация для лендинга:

nav__links: [
    { link: "about", text: "about us" },
    { link: "prices", text: "pricelist" },
    { link: "team", text: "our team" },
    { link: "contact", text: "contact us" },
]

По файловой структуре получается вот так:

Скриншот

Выглядит довольно запутанно и неявно, иерархию не видно сразу. Заодно вопрос, обязательно ли в каждую сущность/модификатор добавлять все файлы технологий? Чаще всего модификатор изменяет только стили например, нужно ли добавлять пустой файл шаблона и скриптов? Или например если я пока что только верстальщик и поведение описываю редко.