How to layout different headers on one site?

Question

BEM

Hello.

Can you tell me if I'm typing headers for different pages of the same site correctly? On the main page one version of the header design, and on the other page - another.

For example, I made a header on the main page. In this version, for example, the background is blue and the letters are white:

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

Now I want to use the same header code for the inner page, but only make the background white and the letters black. Will it be correct if I assign a modifier to the class from the first header according to BEM naming .main-header, for example, .main-header--innerand using this modifier class, bind to internal classes and change the color of the menu letters, or is this not correct?

For example I will do this:

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

Answer 1

1. If the changes are not constructive, then the approach is correct, the modifier and through it the control of the elements. At the same time, it should be taken into account that elements can be mixed, so if any property of an element differs, and the description of its mix with the parent element, then it is worth using the modifier not to the entire block or element (header), but to the nested one. There are no mixes in the example, so this advice is not so obvious.
2. If the changes are constructive and you can’t get off with modifiers (yes, it happens), then this is a completely different block with elements on another page.