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

Привет.

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

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

<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:+777777777" class="work-time__phone">+7 (495) 9797979</a>
                        </div>
                    </div>
                </div>
            </nav>
</header>


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

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

.main-header--inner .menu-top__link {
  color: #000;
}
  • Вопрос задан
  • 525 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn
Руководитель frontend направления, предприниматель
1. Если изменения не конструктивные, то подход верный, модификатор и через него управление элементами. При этом надо учитывать, что элементы могут быть замискованы, поэтому если отличается какое-либо свойство элемента, и описание его микса с элементом родителя, то стоит использовать модификатор уже не ко всему блоку или элементу (шапки), а ко вложенному. В примере нет миксов, поэтому данный совет не так очевиден.
2. Если изменения конструктивные и модификаторами не отделаешься (да, бывает такое), то это абсолютно другой блок с элементами на другой странице.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы