наименование html элементов. БЭМ

129

08 июня 2019, 01:50

Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном 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>

Answer 1

Мне кажется в данном случае более гибким решением будет модификатор ключ-значение

<body class="page"> 
  <header id="home" class="header page__header"> 
    <nav class="nav nav_theme_ligth"> 
      <li class="nav__item nav__item_theme_ligth"> 
        <a href="#home" class="nav__link nav__link_theme_ligth">Home</a> 
      </li> 
      <li class="nav__item nav__item_theme_ligth"> 
        <a href="#about" class="nav__link nav__link_theme_ligth">About</a> 
      </li> 
      <li class="nav__item nav__item_theme_ligth"> 
        <a href="#works" class="nav__link nav__link_theme_ligth">Works</a> 
      </li> 
    </nav> 
  </header> 
</body>

Это позволит не только переиспользовать ваш код, но и не привязываться к контексту. Обратите внимание, что можно использовать любое количество таких модификаторов, например: "nav__item nav__item_theme_ligth nav__item_direction_right nav__item_active"