Pashadip
@Pashadip
Веб-разработчик

Какой модификатор ставить (БЭМ)?

Здравствуйте
Только начал изучать БЭМ и сразу появились вопросы
На сайте такая шапка https://skr.sh/s2wgsKZVOvg
Справа есть меню Оно будет использоваться несколько раз на странице
Написал код
<header>
	<div class="content-header">
		<div class="content-header__logo">
			<a href="/" class="content-header__href">
				<img src="/img/logo.svg" alt="">
			</a>
		</div>
		<nav class="content-header__nav nav-menu">
			  <a href="#" class=""></a>
                         <a href="#" class=""></a>
		</nav>
	</div>
</header>

Не могу сообразить, какой модификатор ставить ссылкам в теге nav: nav-menu__li или content-header__li ?
  • Вопрос задан
  • 428 просмотров
Решения вопроса 3
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега HTML
CEO iAmStudio, предприниматель.
В примере несколько вещей не очень:
1. Пустой тег header. Т.е. незаполненный классом.
2. Как в принципе верно подметил g33km нормой считается вкладывать в тег списка, потому что многоуровневую навигацию так проще оформлять за счет прослоек.
3. Но наличие пустых тегов тоже идет вразрез БЭМ-у, так как для вложенных элементов должны быть классы, которые позволяют ими управлять. Инкапсуляция классами предполагает отстраненность от тегов, хотя и и приходится на всякий случай (а для списком в обязательном порядке) обнулять отступы и т.д.
4. То, о чем говорит в своем ответе g33km:
Если данная навигация будет использоваться в разных местах в одном и том же виде, то ей не нужен класс .content-header__nav

глупость, так как это обыкновенный микс. Он нужен для того, чтобы определить местоположение блока навигации в блоке шапки.

Итого, если не сильно шатать трубу структуру, то данныый код может выглядеть следующим образом:
<header class="content-header">
    <a 
        href="/"
        class="content-header__logo logo">
        <img 
            src="/img/logo.svg" 
            class="logo__image"
            alt="">
    </a>
    <nav class="content-header__nav nav">
        <ul class="nav__list nav__list--inline">
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
        </ul>
    </nav>
</header>

...

<footer class="footer">
    <nav class="footer__nav nav">
        <ul class="nav__list nav__list--column">
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
        </ul>
    </nav>
</footer>


Подвал я указал для образца, как этот блок может быть использован «ниже на странице».

По логике базовый стиль должен обнулять нативные отступы, формировать базовые потребности (можно добавить еще и nav--white, чтобы покрасить в шапке в белый цвет, а в подвале нет (базовым цветом может быть черный у ссылок).

Ну и в принципе чуть больше можно почитать в моей новоявленной документации. Только вчера закинул в интернеты, дорабатываю и буду рад любым вопросам по этой теме. Контакты есть в профиле, врядли отвечу, но самые интересные образцы скорее всего пойдут на доброе дело.
Ответ написан
@g33km
1)Это будет называться не модификатор, а элемент.
2)nav-menu__li, поскольку, как было сказано, меню будет использоваться несколько раз внутри разных блоков.
3)Навигацию рекомендуется делать списком, то есть
<nav>
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
</nav>

4)Если данная навигация будет использоваться в разных местах в одном и том же виде, то ей не нужен класс .content-header__nav
Ответ написан
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
По шагам, чтобы была понятен ход мысли:

  1. определим базовый блок
    <div class="header">
      <div class="header__logo"></div>
      <div class="header__nav"></div>
    </div>


    .header {
      background-color: red;
      display: flex;
    }
    
    .header__logo {
      width: 180px;
    }
    
    .header__nav {
      flex: 1; /* вся оставшаяся ширина */
    }


  2. логотип — самостоятельный блок, может использоваться, например, в футере. Я сразу использовал микс на header__logo, но для базового понимания можно внутри header__logo сделать самостоятельный — за счёт БЭМ это ни на что не повлияет.

    <div class="header">
      <div class="header__logo logo">
        <img src="" alt="logo of top digital …" class="logo__image">
        <img src="" alt="Top digital …" class="logo__text">
      </div>
      <div class="header__nav"></div>
    </div>


    .logo {
      display: flex;
      justify-content: space-between;
    }
    
    .logo__image {
      flex: 1;
    }
    
    .logo__text {
      width: 75%;
    }


    За счёт flex-модели logo__image можно использовать без logo__text, получим просто иконку-логотип.


  3. добавляем меню
    <div class="header">
      <div class="header__logo logo">
        <img src="https://via.placeholder.com/43x43" alt="logo of top digital …" class="logo__image">
        <img src="https://via.placeholder.com/134x15" alt="Top digital …" class="logo__text">
      </div>
      <nav class="header__nav nav">
        <ul class="nav__menu list list_of_menu">
          <li class="list__item nav__menu-item">
            <a href="" class="link nav__link">Пункт меню</a>
          </li>
          <li class="list__item nav__menu-item">
            <a href="" class="link nav__link">Пункт меню</a>
          </li>
          <li class="list__item nav__menu-item">
            <a href="" class="link nav__link">Пункт меню</a>
          </li>
          <li class="list__item nav__menu-item">
            <a href="" class="link nav__link">Пункт меню</a>
          </li>
        </ul>
      </nav>
    </div>


    .list_of_menu {
      list-style: none;
    }
    
    .nav__menu {
      display: flex;
    }
    
    .nav__menu-item + .nav__menu-item {
      margin-left: 1em;
    }
    
    .nav__link {
      color: white;
      text-decoration: none;
    }


  4. скорее всего ширина содержимого у header совпадает с шириной содержимого других частей страницы (то, что иногда называют 12-колоночной вёрсткой) — заведём отдельный класс для этого, например, content и обозначим, какое именно содержимое подчиняется этой ширине
    <div class="header">
      <div class="header__content content">
        <div class="header__logo logo">
          <!--        -->
        </div>
        <nav class="header__nav nav">
          <!--        -->
        </nav>    
      </div>
    </div>


    .content {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }




    Результат: https://codepen.io/Realetive/pen/GRoOzeg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
12 авг. 2020, в 15:55
2000 руб./за проект
12 авг. 2020, в 15:48
3000 руб./за проект