Как правильно верстать разные шапки на одном сайте?

Question

[Валентин Попов]

Привет.

Подскажите правильно ли я верстаю шапки для разных страниц одного сайта? На главной странице один вариант дизайна шапки, а на другой странице - другой.

Вот например я сделал шапку на главной странице. В этом варианте например фон синий, а буквы белые:

<header class="main-header">
            <nav class="main-header-nav">
                <div class="container">
                    <div class="main-header-nav__wrapper">
                        <a class="main-header-nav__logo">
                            <img src="img/logo.svg" alt="" width="164" height="46">
                        </a>
                        <ul class="menu-top main-header-nav__menu-top">
                            <li class="menu-top__item">
                                <a href="vacancies.html" class="menu-top__link">Вакансии</a>
                            </li>
                            <li class="menu-top__item">
                                <a href="pay-on-site.html" class="menu-top__link">Оплата картой</a>
                            </li>
                            <li class="menu-top__item">
                                <a href="our-works.html" class="menu-top__link menu-top__link--count">
                                    Наши работы
                                    <span>107</span>
                                </a>
                            </li>
                            <li class="menu-top__item">
                                <a href="contacts.html" class="menu-top__link">Контакты</a>
                            </li>
                        </ul>
                        <div class="info main-header-nav__info">
                            <div class="work-time">
                                <span class="work-time__text">часы работы</span>
                                <p class="work-time__mode">
                                    <span>ПН-ПТ 9:00 - 19:00 |</span>
                                    <span>Cб-вс 10:00-19:00 </span>
                                </p>
                            </div>
                            <a href="tel:[phone]" class="work-time__phone">[phone]</a>
                        </div>
                    </div>
                </div>
            </nav>
</header>

Теперь я хочу использовать этот же код шапки для внутренней страницы, но только сделать фон белым, а буквы чёрными. Будет ли правильно, если я по БЭМ неймингу присвою классу из первой шапки .main-header модификатор, например .main-header--inner и используя этот класс-модификатор привязываться к внутренним классам и изменить цвет букв меню или это не правильно?

Например я сделаю так:

.main-header--inner .menu-top__link {
  color: #000;
}

Comments

[Сергей delphinpro]

правильно.

[Одиночка Айс]

Проще родительскому блоку (body) задавать классы, типа template-main или page-default, и от него уже плясать.

[WapSter]

Одиночка Айс, оне же про БЭМ спрашивает, а не каскад.
Валентин Попов,

<nav class="main-header-nav">
                <div class="container">
                    <div class="main-header-nav__wrapper">

вот этот момент уже сильно смущает, да вложенность допустима, но не такого вида, почему бы не соблюдать какую-то условность типа <div class="container main-header-nav__container"> элемент скажет, что не разрывно идет с классом container. .main-header--inner .menu-top__link это уже совсем не БЭМ. Допустимо использовать вложенность для стандартных тэгов, особенно там где контент динамически может меняться, к примеру есть некий блок с контентом .block__content p {}

[Валентин Попов]

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

[WapSter]

Валентин Попов, использовать модификаторы .menu-top__link--color {}, да работы дофига будет, но все по бэм и исходи стоит ли оно того. Иначе просто нарушай правила методологии.

[Сергей delphinpro]

WapSter, Да нифига оно не нарушает правил.
По определению модификатор должен затронуть только сам блок, к которому он применяется и ничего более. Элемент является неотъемлемой частью блока и не существует вне его. Таким образом, вешая модификатор на блок, мы вполне можем стилизовать от него элементы этого блока.

[Сергей delphinpro]

Xdevelx, а, вон оно что! Не разглядел. Тогда это неверно.

Answer 1

[Арсений Матыцин]

1. Если изменения не конструктивные, то подход верный, модификатор и через него управление элементами. При этом надо учитывать, что элементы могут быть замискованы, поэтому если отличается какое-либо свойство элемента, и описание его микса с элементом родителя, то стоит использовать модификатор уже не ко всему блоку или элементу (шапки), а ко вложенному. В примере нет миксов, поэтому данный совет не так очевиден.
2. Если изменения конструктивные и модификаторами не отделаешься (да, бывает такое), то это абсолютно другой блок с элементами на другой странице.