Как правильно оформить второй header для других страниц?

Question

[Кирилл]

Делаю проект по бэм и делю блоки на разные файлы (pug, scss). В проекте на главной странице header с темным фоном и белыми иконками/текстами, а на остальных страницах наоборот - белый фон, черные иконки и текст.

Как правильно это реализовать на уровне структуры проекта? Очень много вопросов порождается на этапе мыслей, поэтому просто скажите, как вы это делаете? где пишете или переопределяете стили второй шапке, как ее добавляете на страницу? Любые советы, спасибо.

Answer 1

[Realetive]

В первую очередь мы смотрим в дизайн и пытаемся понять, кто «диктует» различия у одинаковых или схожих блоков. Тут, похоже, есть две «темы», которые модифицируют подложку (цвет фона) у родительского блока и цвет текста у заголовка. Возможно (без дизайна тут можно бесконечно гадать), что по-БЭМ это будет выглядеть как-то так:

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

— у .header_theme_* описан цвет «подложки» (background-color), а .heading_theme_* в свою очередь «знает», какой нужно задавать цвет текста (color).

Comments

[Кирилл]

Спасибо за ответ! Вот эти шапки.



В качестве heading в вашем примере выступает любой блок внутри header, я правильно понимаю? То есть для каждого блока (иконка, кнопка, навигация) у меня должен быть прописан модификатор с возможной темой, которые я буду менять в html в зависимости от страницы?

[Realetive]

Кирилл, в идеале — да. И ещё правильнее — если модификатор темы будет проставляться автоматически шаблонизатором (например, на основании темы «родителя», ещё лучше — если рекурсивно «вверх», чем «выше», тем лучше).

.heading — это h-заголовки у меня. Не использую имя класса-блока .title, чтобы не было путаницы с <title>.

В вашем дизайне получается что-то такое:

1 шаг, «от общего к частному»:

<div class="header">
  <div class="header__menu"></div>
  <div class="header__user"></div>
  <div class="header__search"></div>
  <div class="header__lang"></div>
</div>

2 шаг — добавляем немного контента

<div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">Каталог</li>
        <li class="menu__item">Художникам</li>
        <li class="menu__item">Блог</li>
        <li class="menu__item">Ещё</li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">Александрелло</div>
      <div class="user__likes">85</div>
      <div class="user__cart">23</div>
    </div>
  </div>
  <div class="header__search"></div>
  <div class="header__lang">RU</div>
</div>

3 шаг — добавляем уточняющие элементы для точечной стилизации
3.1 — пункты меню делаем ссылками

<div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">
          <a href="#" class="menu__link">Каталог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Художникам</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Блог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Ещё</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">Александрелло</div>
      <div class="user__likes">85</div>
      <div class="user__cart">23</div>
    </div>
  </div>
  <div class="header__search"></div>
  <div class="header__lang">RU</div>
</div>

3.2 — добавляем декоративные элементы в «данные» пользователя (имя, лайки и корзину — потому что у каждого пользователя свои данные, поэтому эти «элементы» непосредственно принадлежат блоку пользователя, т. е. блоку .user:

<div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">
          <a href="#" class="menu__link">Каталог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Художникам</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Блог</a>
        </li>
        <li class="menu__item menu__item_type_dropdown">
          Ещё
          <img src="" alt="" class="icon icon_type_dropdown menu__dropdown-icon">
        </li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">
        <img src="" alt="" class="icon icon_type_user user__icon">
        <div class="user__name">Александрелло</div>
      </div>
      <div class="user__likes">
        <img src="" alt="" class="icon icon_type_heart user__likes-icon">
        <div class="user__likes-count">85</div>
      </div>
      <div class="user__cart">
        <img src="" alt="" class="icon icon_type_cart user__cart-icon">
        <div class="user__cart-count">23</div>
      </div>
    </div>
  </div>
  <div class="header__search">
    <img src="" alt="" class="icon icon_type_search header__search-icon">
  </div>
  <div class="header__lang">RU</div>
</div>

4 шаг — опа! у нас меняется оформление подложки и соответсвенно — текста — добавляем тему каждому блоку. но как это сделать, я уже привел пример.

[Кирилл]

Realetive, Спасибо за мастер-класс! Ответ оказался лучше моих ожиданий. :)

[Кирилл]

Realetive, Заметил что у вас в коде блок user вложен в элемент header__user:

<div class="header__user">
    <div class="user">

Мне казалось, что верно делать так:

<div class="header__user user">

Оба варианта корректны или нет? И какие преимущества дает первый вариант? Спасибо.

[Realetive]

Мой вариант — верный. То, что приводите вы, называется микс и тоже является корректным вариантом, но (!!!) с ним нужно быть осторожнее — микс обычно используется, чтобы сэкономить на вложенности и объединить несколько БЭМ-сущностей на одном теге. Но не стоит прибегать к этому приёму, пока не научитесь основам БЭМ-мышления. Т. е. сперва разбейте на БЭМ-сущности так, как я привёл в примере по шагам. Потом, если видите объединяемые сущности (про header__user и user — всё правильно подмечено) — делаете микс.

[Кирилл]

Realetive, понял, спасибо за объяснение.