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

Question

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

Answer 1

[Арсений Матыцин]

В примере несколько вещей не очень:
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, чтобы покрасить в шапке в белый цвет, а в подвале нет (базовым цветом может быть черный у ссылок).

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

Comments

[g33km]

А надо ли добавлять в разметку классы (в данном случае .content-header__nav), если они никак не будут задействованы в css (тот случай, когда навигация вставляется в нескольких местах на странице с одной и той же стилизацией)?
Если да, то отныне буду знать. Обычно удаляю неиспользуемые классы с целью облегчения кода (конечно, если на всей страничке только один подобный неиспользуемый класс, то его удаление никак на производительности не скажется. Но когда их много?)

[Арсений Матыцин]

g33km, процитирую себя:

Блок — по своей сути закрытый контейнер. Он ничего не знает про то, что вокруг.

.
А элемент родительского блока знает, он и задает положение блока внутри себя. Для этого и существуют миксы по своей сути.

Ну и да, много классов, прямо строки классов это по БЭМ. Оптимально их наименование минимально необходимым количество буков, но только не в угоду содержанию, это все-таки не атомарник. Но с этим приходится мириться, так как преимущества с головой покрывают этот и другие недостатки.

Answer 2

[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

Comments

[Арсений Матыцин]

На счет четвертого пункта мимо.

Answer 3

[Realetive]

По шагам, чтобы была понятен ход мысли:

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