Микс
Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.
Миксы позволяют:
- совмещать поведение и стили нескольких сущностей без дублирования кода;
- Элемент списка
<!-- Блок `header` -->
<div class="header">
<!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
<div class="search-form header__search-form"></div>
</div>
Источник: Быстрый старт - Микс.
У меня есть блок header
. Внутри него есть меню nav
и дочерние элементы nav__item
, nav__link
. Мне необходимо изменить стили у навигации, и для этого я добавил классы: header__nav
, header__item
, header__link
. Вопрос заключается в том, что в блоке header
могут быть и другие ссылки, но они будут иметь другие стили и назвать их header__link
будет не уместно, а стили писать через основной родительский класс тоже плохо, ибо они будут повторяться в другом месте, но будут иметь другие стили.
<body class="page">
<header id="home" class="header page__header">
<nav class="nav header__nav">
<li class="nav__item header__item">
<a href="#home" class="nav__link header__link">Home</a>
</li>
<li class="nav__item header__item">
<a href="#about" class="nav__link header__link">About</a>
</li>
<li class="nav__item header__item">
<a href="#works" class="nav__link header__link">Works</a>
</li>
</nav>
</header>
</body>
Раньше я просто писал класс, на основе класса родителя: header-nav
, но это мешает повторно использовать блок.
<body class="page">
<header id="home" class="header page__header">
<nav class="header-nav header__nav">
<li class="header-nav__item">
<a href="#home" class="header-nav__link header-nav__link_active">Home</a>
</li>
<li class="header-nav__item">
<a href="#about" class="header-nav__link">About</a>
</li>
<li class="header-nav__item">
<a href="#works" class="header-nav__link">Works</a>
</li>
</nav>
</header>
</body>
P.S: У меня был вариант дать второй класс - блок, но я не знаю на сколько это адекватно.
<body class="page">
<header id="home" class="header page__header">
<nav class="nav header-nav">
<li class="nav__item header-nav__item">
<a href="#home" class="nav__link header-nav__link">Home</a>
</li>
<li class="nav__item header-nav__item">
<a href="#about" class="nav__link header-nav__link">About</a>
</li>
<li class="nav__item header-nav__item">
<a href="#works" class="nav__link header-nav__link">Works</a>
</li>
</nav>
</header>
</body>
.nav
на всём сайте?.nav
для всех меню на сайте. Они как правило слишком разные.header__item
илиheader__link
? Если у вас естьnav
и элементы от этого блока которые вы стилизируете, а черезheader__nav
позиционируете. Абсолютно универсальное решение для всего у вас вряд ли получится, покрайней мере я пытался и не смог. Поэтому сначала смотрю на задачу.