Можно ли так называть классы по БЭМ?

Question

[Genri_Rus]

<div class="navbar-center">
	<div class="navbar-center__menu menu-mobile">
		<div class="menu-mobile__icon">
			<span class="menu-mobile__line">0</span>
		</div>
		<div class="menu-mobile__modal">
			<div class="menu-mobile__header">
				<div class="menu-mobile__header-title">Меню</div>
				<div class="menu-mobile__header-close"></div>
			</div>
			<div class="menu-mobile__block">
				<ul class="menu-mobile__list">
					<li class="menu-mobile__item">
						<span class=""></span>
					</li>
					<li class="menu-mobile__item"></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Мобильная версия меню.

Класс menu-mobile__block подходит или все таки можно использовать какое-то другое название?

Comments

[Ankhena]

- Просто куча лишних оберток.

- Почему-то кнопка сделана div'ом.

- menu-mobile__header - а если в другом дизайне оно перестанет быть в хедере?

- menu-mobile__header-close - хотите сказать, что open это отдельная кнопка? Так нет же. Это одна кнопка (а никакой не div) с модификаторами.

- Вместо ссылок в меню span'ы.

- menu-mobile - меню на десктопе и мобилке разное?

- navbar-center в любом дизайне он будет центр? Может, у него смысл какой-то есть?

- Это menu-mobile__icon с этим menu-mobile__line вообще дичь какая-то. Если иконка с полоской это украшения, то в разметке их быть не должно. Если там есть какой-то смысл (сомневаюсь), то используйте семантику и понятные названия.

Класс menu-mobile__block подходит

Не ясно зачем он вообще сдался. Еще был бы nav'ом, то было бы ок. Заодно и название нормальное появилось бы. Причем, с миксом.

Представьте, что стилей вообще нет. Что вы можете понять из этой разметки?

[Genri_Rus]

Ankhena, вот пример:

- Почему-то кнопка сделана div'ом.

Потому что у кнопки есть свои стили, которые нужно будет обнулить

- menu-mobile__header-close - хотите сказать, что open это отдельная кнопка? Так нет же. Это одна кнопка (а никакой не div) с модификаторами.

У меня кнопка open имеет совершенно другие стили

- navbar-center в любом дизайне он будет центр? Может, у него смысл какой-то есть?

Да в нем я расположил логотип и поиск

[Genri_Rus]

Ankhena, а где можно почитать что нужно использовать именно button ?

Я просто на многих сайтах видел иконки меню в виде дивов и лебелов

[Ankhena]

Genri_Rus, назначение тегов описано в спецификации HTML.

У этой кнопки должно быть 2 модификатора.
То, что нужно убирать или переопределять какие-то родные стили у элементов это абсолютно нормально.

Я просто на многих сайтах видел иконки меню в виде дивов и лебелов

Вы же сюда пришли спросить как правильно, а не показать плохие практики ))

[Genri_Rus]

Ankhena, а могли бы показать как вы считаете более семантически правильно на моем примере ?

Я бы отметил ваш вариант )

[Ankhena]

Genri_Rus, семантически меню это <nav>, в нем список <ul> с дочерними <li>, в который лежат ссылки <a>.
Поскольку, роботы и читалки и так понимают, что nav это меню, то слово меню можно вообще сделать псевдоэлементом. Если не хотите псевдоэлементом, то span|div|p. Заголовком делать не стала бы, потому что толку от такого заголовка ноль.
О том, какими тегами нужно делать меню люблю вот это видео

Кнопка - тег <button>.

[Genri_Rus]

Ankhena, а вот с моим примером показали бы ?

Именно с button это меню как лучше по классам назвать?

[Ankhena]

Genri_Rus,

а вот с моим примером показали бы ?

Это было с вашим примером )))

Именно с button это меню как лучше по классам назвать?

Так чтобы всем было понятно о чем речь

<button class="menu-toggle menu-toggle--open">
<span class="visually-hidden">Открыть/закрыть меню</span>
</button>
<!--если размытое пятно это лого-->
<a href="/" class="logo">
<img class="logo__img">
</a>
<a href="" class="search-btn">
 <span class="visually-hidden">Открыть поиск по странице</span>
<!--сама лупа фоном или псевдо-->
</a>

Возможно, каждому из этих блоков нужен микс (класс элемента от родительского блока).
По классике БЭМа блок не должен ничего знать о своем позиционировании, его можно задавать элементам.

Также могут быть какие угодно комбинации, миксы и модификаторы.

[Genri_Rus]

Ankhena, примерно так ?

<div class="navbar-center">
	<div class="navbar-center__menu menu-mobile">
		<button class="menu-toggle menu-toggle--open">
			<span class="menu-mobile__line">0</span>
		</button>
		<div class="menu-mobile__modal">
			<div class="menu-mobile__header">
				<div class="menu-mobile__header-title">Меню</div>
				<button class="menu-toggle menu-toggle--close menu-mobile__header-close"><svg class="icon-close"></svg></button>
			</div>
			<nav class="menu-mobile__content">
				<ul class="menu-mobile__list">
					<li class="menu-mobile__item">
						<a class="menu-mobile__link" href="#">link</a>
					</li>
					<li class="menu-mobile__item">
						<a class="menu-mobile__link" href="#">link</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>

[Ankhena]

Genri_Rus, неа.

У меня там в первом посте было много вопросов.

[Genri_Rus]

Ankhena, покажите как правильно

В вашем видео там больше про семантику рассказывается nav>ul>li, чем про БЭМ

[Ankhena]

Genri_Rus,

В вашем видео там больше про семантику рассказывается nav>ul>li, чем про БЭМ

Ага, это же ваш был вопрос:

а могли бы показать как вы считаете более семантически правильно на моем примере ?

Поэтому, я дала видео про семантику.

покажите как правильно

Да вроде написала уже.
Ну давайте еще со списком меню напишу.

<header class="header">

  <button class="menu-toggle menu-toggle--open">
    <span class="visually-hidden">Открыть/закрыть меню</span>
  </button>
  <a href="/" class="logo">
    <img class="logo__img" src="">
  </a>
  <a href="" class="search-btn">
    <span class="visually-hidden">Открыть поиск по странице</span>
  </a>

  <nav class="header__nav menu menu--opened">
    <ul class="header__nav-list">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
  </nav>

</header>

[Genri_Rus]

Ankhena, я имел ввиду про это модальное окно:

У вас в примере нету кнопки close, названия меню, т.е. обертка:

<div class="menu-mobile__modal">
      <div class="menu-mobile__header">
        <div class="menu-mobile__header-title">Меню</div>
        <button class="menu-toggle menu-toggle--close menu-mobile__header-close"><svg class="icon-close"></svg></button>
      </div>
      <nav class="menu-mobile__content">
        <ul class="menu-mobile__list">
          <li class="menu-mobile__item">
            <a class="menu-mobile__link" href="#">link</a>
          </li>
          <li class="menu-mobile__item">
            <a class="menu-mobile__link" href="#">link</a>
          </li>
        </ul>
      </nav>
    </div>

[Ankhena]

Genri_Rus, интересно, вы читаете, что я пишу?
Кнопка открыть/закрыть - это одна кнопка.
Заголовок меню я бы делала псевдоэлементом. Почему именно так, написано выше.

[Ankhena]

Genri_Rus, Грубая реализация всего этого на коленке, только для того, чтобы была понятна механика https://jsfiddle.net/kv524gL1/

Можно было еще проще и логичнее, только переписывать лень уже.
На js менять модификатор только у header.
Тогда проще разбираться с выравниваем в шапке, когда кнопка переезжает в другое место.

[Genri_Rus]

Ankhena,

Заголовок меню я бы делала псевдоэлементом. Почему именно так, написано выше.

А если мне нужно не псевдоэлементом ?
Вы показали:

<nav class="header__nav menu menu--opened">
    <ul class="header__nav-list">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
  </nav>

Т.е. внутри nav нужно расположить название меню и иконку закрытия (иконка svg) или лучше выше?

[Genri_Rus]

Ankhena, проблема в том, что у меня иконка close в виде svg, а иконке меню я просто линии с помощью стилей задал, т.е. это наверно будет сложно реализовать через одну кнопку

[Ankhena]

Genri_Rus,

Т.е. внутри nav нужно расположить название меню и иконку закрытия (иконка svg) или лучше выше?

:) :) :)
Я вам сказала и показала как на мой взгляд лучше. И по некоторым вопросам объяснила почему я бы стала делать так, а не иначе.
Дальше вы можете делать с этим что хотите, даже оставить свой первоначальный код.

Всегда говорю, что верстка хороша тем, что одна задача имеет множество решений. Они бывают красивые и некрасивые, эффективные и нет, быстрые или вдумчивые и т.д. Через год, глядя на свой код приходит понимание, где его можно было еще улучшить. Это нормально, это прогресс.

Если остались вопросы по моему коду - спрашивайте.
Если вопрос, можно ли его модифицировать и накрутить туда лишних тегов и оберток - можно.
Куда лучше их накрутить - куда вам удобнее или куда заставил дизайнер со своим дизайном.

[Ankhena]

Genri_Rus,

проблема в том, что у меня иконка close в виде svg, а иконке меню я просто линии с помощью стилей задал, т.е. это наверно будет сложно реализовать через одну кнопку

Нет такой проблемы, даже если это 2 svg.

Если что, крестик это 2 линии.

Это так, в подарок https://jsfiddle.net/Ankhena/fxv2tdL0/

[Genri_Rus]

Ankhena, да дело в том, что у крестика концы немного закруглённые и эти концы просто так с помощью border-radius не сделаешь (

Дальше вы можете делать с этим что хотите, даже оставить свой первоначальный код.

Дак я хочу как у вас )
Только может вот так пойдет ?

<div class="menu-mobile">
	<button class="menu-toggle menu-toggle--open">
		<span class="icon-open">0</span>
	</button >
	<div class="menu-mobile__container">
		<div class="menu-mobile__header">
			<div class="menu-mobile__title">Меню</div>
			<button class="menu-toggle menu-toggle--close"><svg class="icon-close"></svg></button>
		</div>
		<nav class="menu-mobile__nav">
			<ul class="menu-mobile__nav-list">
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			</ul>
		</nav>
	</div>
</div>

Мне Стрелок011 что-то похожее предложил, но я под ваш вариант модернизировал ?)

[Ankhena]

Genri_Rus,

да дело в том, что у крестика концы немного закруглённые

Пусть будет svg. (Хоть и не очень понятно, почему их не закруглить в CSS, но может качества скрина не хватает для осознания)
Если должен меняться цвет, то просто меняете 2 куска кода внутри svg. Или двумя svg и меняете одну на другую.

Если не должен, то просто вставляете фоном, можно в base64, можно в content у псевдо.

Ни для чего из этого не нужна вторая кнопка в разметке.

<div class="menu-mobile">

Откуда же вы берете mobile-то всё время.
У вас что, разные меню для десктопа и мобилки?

[Genri_Rus]

Ankhena,

Откуда же вы берете mobile-то всё время.
У вас что, разные меню для десктопа и мобилки?

Именно так, у меня состав (структура) меню отличается:

У меня по структуре:

<div class="navbar">
	<div class="navbar-top"></div>
	<div class="navbar-center"></div>
	<div class="navbar-bottom"></div>
</div>

[Ankhena]

Genri_Rus, что-то я не вижу разницы между нижним меню на десктопе и мобильным.

[Genri_Rus]

Ankhena, так как это меню собрать воедино ?

Если верхнее меню в navbar-top, а нижнее в navbar-bottom, то только с помощью js ?

[Ankhena]

Genri_Rus, гридами делайте что хотите.

И старайтесь называть классы по смыслу, а не цвету или положению. Очень глупо выглядит какое-нибудь top-menu, бывшее на мобилке в шапке наверху и оказавшееся внизу левого сайдбара на десктопе.

[Genri_Rus]

Ankhena, гриды на ie не работают
Все классы, связанные с top-menu и bottom-menu я с помощью js меняю на menu-mobile__item
Иначе я вообще не представляю как можно в мобильной версии верхнее с нижнее меню соединить в одно целое

Так у меня <div class="menu-mobile"> находится в блоке <div class="navbar-center"></div>
У меня как минимум в шапке 2 nav (меню) - сверху и внизу, я иконку open-menu расположил рядом с логотипом и скрыл на декстопе
И все таки почему Стрелок011 предложил <div class="menu-mobile">, а вы считаете что декстопное меню должно отличаться от мобильного меню ?

<div class="navbar">
  <div class="navbar-top"></div>
  <div class="navbar-center">
	<a href="#" class="navbar-center__logo logo">Лого</a>
	<div class="menu-mobile">
		
	</div>
	<div class="navbar-center__search search">
  </div>
  <div class="navbar-bottom"></div>
</div>

[Ankhena]

Genri_Rus,

гриды на ie не работают

И давно?
;)
Не буду спрашивать какой версии ие вы собрались поддерживать.

Удобнее на js, делайте на js.

а вы считаете что декстопное меню должно отличаться от мобильного меню ?

Что-что я говорю? Я с первого поста спрашиваю зачем там слово mobile и считаю его нежелательным вне зависимости от того, что там происходит с меню.

[Genri_Rus]

Ankhena, хотел уточнить, если у меня 2 меню: menu-top и menu-bottom

Мне нужно эти 2 меню в мобильной версии соединить в одно меню, я правильно понял ?

И все таки у меня немного нестандартное мобильное меню, где надпись каталог - внутри него уже сабменю, так будет правильнее ?

<div class="navbar">
	<div class="navbar-top">
		<div class="menu-top"></div>
	</div>
	<div class="navbar-center">
		<div class="menu-center">
			тут в мобильной версии menu-top и menu-bottom
		</div>
		<a href="#" class="navbar-center__logo logo">Лого</a>
		<div class="navbar-center__search search">
		
		</div>
	<div class="navbar-bottom">
		<div class="menu-bottom"></div>
	</div>
</div>

[Ankhena]

Genri_Rus,

<header class="header">
<a class="header__city-choise city-choise" href="">Москва</a>

  <button class="menu-toggle menu-toggle--open">
    <span class="visually-hidden">Открыть/закрыть меню</span>
  </button>
  <a href="/" class="logo">
    <img class="logo__img" src="http://img.ava.ua/img/products/343/343930/2551422.jpg">
  </a>
  <div class="header__search-panel search">
    <form action="search__form"></form>
    <a href="" class="search-btn">
      <span class="visually-hidden">Открыть поиск по странице</span>
    </a>
  </div>
  <div class="header__user-nav user-nav">
    ❤⛹
  </div>

  <nav class="header__nav menu menu--opened">
    <ul class="menu__list menu__list--main">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
    <ul class="menu__list menu__list--catalog">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
  </nav>
</header>

Гриды или абсолюты в помощь.

[Genri_Rus]

Ankhena, спасибо за наводку, а почему именно не navbar ?)

Вы сильно все упростили, а разве menu-top и menu-bottom на декстопе можно объединить в один nav ?

[Ankhena]

Genri_Rus,

спасибо за наводку, а почему именно не navbar ?)

Нравится слово navbar пишите navbar.

Вы сильно все упростили

Я могу и весь сайт сверстать и стили написать ))) Но боюсь, что моего альтруизма не хватит на то, чтобы делать это бесплатно.
Думаю, что вы сами можете разметить форму поиска, иконки избранного, корзины и т.д. Больше я вроде ничего не упрощала.

а разве menu-top и menu-bottom на декстопе можно объединить в один nav ?

Представьте, что вы ничего не знаете про стили. И будете читать разметку. Что вы поймете? Что есть навигация из двух списков, в одном меню каталога и в другом стандартная менюшка сайта/инетмагаза.
Отлично, всё понятно.

[Genri_Rus]

Ankhena,

Представьте, что вы ничего не знаете про стили. И будете читать разметку. Что вы поймете? Что есть навигация из двух списков, в одном меню каталога и в другом стандартная менюшка сайта/инетмагаза.
Отлично, всё понятно.

Без абсюлюта такое не провернешь, одно меню вверху, другое внизу

Это наверно нужно будет задавать ширину всему header'у в 100% и справа вверху будет пустота для верхнего меню, туда его абсолютом перемещать

[Ankhena]

Genri_Rus, если бы я решила использовать позиционирование, то делала бы наоборот, поиск и его соседей делала абсолютом.

[Genri_Rus]

Ankhena, а может покажите чисто меню на десктопе как вы бы сделали абсолютом ?

Я так понял вы хотите соединить на десктопе верхнее и нижнее меню, а на мобильной версии его показывать уже через специальные модификаторы БЭМ ?

[Ankhena]

Genri_Rus, очень быстро и очень на коленке что-то типа того https://jsfiddle.net/ndxc5p8q/

[Genri_Rus]

Ankhena, спасибо, я кстати совсем забыл, у меня в нижнем меню должен быть слайдер:

[Ankhena]

Genri_Rus, и что это меняет? )))
Смотря как его делать, максимум даст обертку вокруг списка.

[Genri_Rus]

Ankhena, я к тому, что slick slider вроде на флексы плохо реагирует

[Ankhena]

Genri_Rus,

я к тому, что slick slider вроде на флексы плохо реагирует

Откуда же вы новые условия выкапываете...

Не используйте slick, вряд ли вас заставляют.
Если слик: то слик выставит вам li в ряд вместо флекса флоатом. И слик также не умеет флекс у самих слайдов. Поскольку, у вас слайд это li'шка и флекс ей по большому счету по барабану, то на погоду не повлияет.
Плюс: не нужна доп.обертка.

Если всё таки использовать современное решение без jq зависимости, swiper, то он умеет флекс. Но придется делать доп.обертку или даже 2.

[Genri_Rus]

Ankhena, проблема еще вот в чем

<nav class="header__nav menu menu--opened">
    <ul class="menu__list menu__list--main">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
    <ul class="menu__list menu__list--catalog">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
</nav>

А в мобильной версии меню наоборот:

[Ankhena]

Genri_Rus, у меня такое чувство, что еще через полчаса выяснится, что я уже кормлю вас обедом на своей кухне, а вы спрашиваете и почему посуда не помыта.

Надеюсь, что вы умете флексом или гридом менять порядок элементов.

[Genri_Rus]

Ankhena, )

Так проблема в том, что флекс в мобильной версии сделает меню в строку

[Ankhena]

Genri_Rus,

Так проблема в том, что флекс в мобильной версии сделает меню в строку

это не проблема

[Genri_Rus]

Ankhena, хотел еще уточнить:

Что-что я говорю? Я с первого поста спрашиваю зачем там слово mobile и считаю его нежелательным вне зависимости от того, что там происходит с меню.

А когда используют название у класса menu-mobile ?

[Ankhena]

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

А когда используют название у класса menu-mobile ?

Когда не в состоянии подвинуть меню или другой элемент из мобильного положения в десктопное без дублирования и или сделать это на js.

[Genri_Rus]

Ankhena, т.е. если бы у меня меню было бы сокращенное, то нужно было использовать класс menu-mobile ?

[Ankhena]

, т.е. если бы у меня меню было бы сокращенное, то нужно было использовать класс menu-mobile ?

Проще убрать лишние пункты.
Например, не показывать подменю.

Если одно из другого вообще не делается, то разные.

Но это не ваш случай.

[Genri_Rus]

Ankhena, дело в том, что у меня акции в каталоге на декстопе, а в мобильной версии не в каталоге (подменю)

[Ankhena]

Genri_Rus, )))))
Просто выберите вариант, который вам больше нравится.
Невозможно тратить на это столько времени.

[Genri_Rus]

Ankhena, ну мой вариант имеет право жить ?)

<div class="navbar">
  <div class="navbar-top">
    <div class="menu-top"></div>
  </div>
  <div class="navbar-center">
    <div class="menu-mobile">
      тут в мобильной версии menu-top и menu-bottom
    </div>
    <a href="#" class="navbar-center__logo logo">Лого</a>
    <div class="navbar-center__search search">
    
    </div>
  <div class="navbar-bottom">
    <div class="menu-bottom"></div>
  </div>
</div>

[Ankhena]

Genri_Rus, вы можете писать любой код, который выдумаете. Особенно, если он работает.
Думаю, мы всё обсудили.

[Genri_Rus]

Ankhena, как это Стрелок011 предложил )

Я его код под ваш модернизировал:

<div class="navbar">
	<div class="navbar-top">
		<div class="menu-top"></div>
	</div>
	<div class="navbar-center">
		<div class="menu-mobile">
			<button class="menu-toggle menu-toggle--open">
				<span class="icon-open">0</span>
			</button>
			<div class="menu-mobile__container">
				<div class="menu-mobile__header">
					<div class="menu-mobile__title">Меню</div>
					<button class="menu-toggle menu-toggle--close"><svg class="icon-close"></svg></button>
				</div>
				<nav class="menu-mobile__nav">
					<ul class="menu-mobile__nav-list">
						<li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
						<li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
						<li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
						<li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
					</ul>
				</nav>
			</div>
		</div>
		<a href="#" class="navbar-center__logo logo">Лого</a>
		<div class="navbar-center__search search">
			
		</div>
		<div class="navbar-bottom">
			<div class="menu-bottom"></div>
		</div>
	</div>
</div>

Проблема в том, что у меня линии menu-toggle--open сделаны с помощью стилей, а меню с классом menu-toggle--close с помощью svg
И я не представляю как можно с помощью одной кнопки сделать сразу и бургер, и close меню

[Ankhena]

Я уже отвечала на этот вопрос.

[Ankhena]

Genri_Rus, если у вас при ховере крестик менчется на галочку, что вы делаете?
Тут тоже самое, только при смене класса у кнопки.

[Genri_Rus]

Ankhena, это:

<button class="menu-mobile__icon menu-mobile__icon--open">
	<span class="menu-mobile__icon-line">0</span>
</button>

И это:

<button class="menu-mobile__icon menu-mobile__header-close menu-mobile__icon--close">
   <svg class="icon-close icon-close--menu-mobile" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.76221 8.00009L15.7444 2.01765C15.9089 1.85297 15.9997 1.63326 16 1.39898C16 1.16458 15.9092 0.94461 15.7444 0.780188L15.2202 0.25609C15.0553 0.0910169 14.8356 0.000610352 14.6011 0.000610352C14.367 0.000610352 14.1473 0.0910169 13.9824 0.25609L8.00026 6.23814L2.01782 0.25609C1.85327 0.0910169 1.63343 0.000610352 1.39902 0.000610352C1.16488 0.000610352 0.945041 0.0910169 0.780488 0.25609L0.256 0.780188C-0.0853333 1.12152 -0.0853333 1.67671 0.256 2.01765L6.23831 8.00009L0.256 13.9823C0.0913171 14.1472 0.000650406 14.3669 0.000650406 14.6012C0.000650406 14.8355 0.0913171 15.0552 0.256 15.22L0.780358 15.7441C0.944911 15.909 1.16488 15.9996 1.39889 15.9996C1.6333 15.9996 1.85314 15.909 2.01769 15.7441L8.00013 9.76191L13.9823 15.7441C14.1471 15.909 14.3668 15.9996 14.601 15.9996H14.6012C14.8355 15.9996 15.0552 15.909 15.22 15.7441L15.7443 15.22C15.9088 15.0553 15.9996 14.8355 15.9996 14.6012C15.9996 14.3669 15.9088 14.1472 15.7443 13.9824L9.76221 8.00009Z"/></svg>
</button>

[Ankhena]

<button class="toggle toggle--open" >
<svg class="триграм"></svg>
<svg class="крестик"></svg>
</button>

Когда open, то показывается триграм, крестик скрываете. Когда close наоборот.

И спанчик с текстом не забудьте для доступности.

[Genri_Rus]

Ankhena, а почему у триграм svg, а не <span class="menu-mobile__icon-line">0</span> ?
Насколько я знаю бургер меню делают по-разному:

<button>
	<span>0</span>
	<span>0</span>
	<span>0</span>
</button>

Либо с псевдоэлементами:
<span class="menu-mobile__icon-line">0</span> ?

[Ankhena]

Genri_Rus,
да как хотите так и делайте. Нравится svg делайте svg, хочется чисто css - делайте на css. Зачем вам ноль внутри спана я не знаю.
Я за единообразие, т.е. либо так либо так. Но никто не мешает взять svg только для одного состояния.

Сути это не меняет.
Одна кнопка. Стили меняются в зависимости от модификатора. Модификатор меняется на js.

[Genri_Rus]

Зачем вам ноль внутри спана я не знаю.

Говорят, что валидатор ругается на пустоту в верстке

[Ankhena]

Genri_Rus, а чего бы вам с ним напрямую не пообщаться?
Я и за пустые теги ругаю, а уж за левые нули просто уволила бы к черту.

[Genri_Rus]

Ankhena,

Я и за пустые теги ругаю, а уж за левые нули просто уволила бы к черту.

Понял, принял, лучше тогда так ?
<span class="menu-mobile__icon-line">Menu</span>

[Ankhena]

Genri_Rus, если вы потом собираетесь его скрыть через font-size 0,то не лучше.
Паттерн visually-hidden я уже показывала. Но, поскольку, спан вам нужен для полоски, то лучше пустой.

[Genri_Rus]

Ankhena, так валидатор ругается на пустоту и почему вы считаете, что

собираетесь его скрыть через font-size 0,то не лучше.

[Ankhena]

Genri_Rus, господи, да с чего вы взяли, что он ругается??? Откуда этот бред?

[Genri_Rus]

Ankhena, ну тогда объясните мне, почему надпись menu нельзя использовать ?)

[Ankhena]

Genri_Rus, погуглите про доступное скрытие самостоятельно

[Genri_Rus]

Ankhena, добрый день

Я погуглил про доступное скрытие, а именно там говорилось об visibility: hidden, но про font-size: 0 я так ничего и не нашел

Из ваших предложений, я сделал одну кнопку

<button class="menu-mobile__icon menu-mobile__icon--open">
  <span class="menu-mobile__icon-line">Menu</span>
</button>

и добавил анимацию открытия/закрытия

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

[Ankhena]

Genri_Rus,

но про font-size: 0 я так ничего и не нашел

Так еще раз: font-size 0 не является доступным скрытием.

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

Зачем всё меню клонировать, если нужно передвинуть только акции это загадка. Ну да ладно, сделали и сделали. На js без разницы.

[Genri_Rus]

Ankhena,

Так еще раз: font-size 0 не является доступным скрытием.

А тогда, когда используют font-size 0 ?

[Ankhena]

Genri_Rus, гугл не дает ответа?

Answer 1

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

1. Названия должны быть понятными. Без самой верстки перед носом.
2. У тебя тут row-space--between хрень, кажись, если я правильно понял, должно быть так row--space-between

Comments

[Genri_Rus]

У тебя тут row-space--between

Это лишнее, я правильно понимаю, что можно сделать такую вложенность ?

<div class="menu-mobile__block">
	<ul class="menu-mobile__list">
		<li class="menu-mobile__item">
			<span class=""></span>
		</li>
		<li class="menu-mobile__item"></li>
	</ul>
</div>

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

Genri_Rus, да, «плоская» структура классов может уходить вглубину в реальной верстке.

Злоупотреблять не рекомендую, так чаще всего лучше замиксовывать. В твоем примере все законно, но неудобно.

Не в душе, что ты хотел этими всеми классами с пустыми названиями сказать, но вот тут я бы сделал menu-mobile__block menu-mobile-block и следующую вложенность описал отдельный блоком с элементами.

[Genri_Rus]

Арсений Матыцин, а вот название menu-mobile__block здесь логично смотрится или вместо block что-то другое придумать ?
Просто пока что ничего другое в голову не приходит

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

Genri_Rus, если я задаюсь вопросом, что это за срань такая, то и ты задашься. Время потраченное на попытки распознать, «что же ты, блядь, написал» — потраченное впустую.

__icon звучит еще понятно, __modal уже заставляет меня задать вопрос, что же ты натворил, а __block загоняет в уныние. Ты имел в виду __content?

Потому я и говорю, написал ты все законно, но прострелил себе ногу. Сам. Несколько раз. И виноват не БЭМ, а ты сам. Учись распределять архитектуру, не стрелять себе в ноги, и миксовать блоки.

[Genri_Rus]

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

__icon звучит еще понятно, __modal уже заставляет меня задать вопрос, что же ты натворил, а __block загоняет в уныние. Ты имел в виду __content?

У меня меню появляется поверх контента:

Answer 2

[strelok011]

Структура перегружена лишними обёртками и неправильной семантикой. Это не модал, а скорее просто menu-mobile__container. Block можно вообще выкинуть, он смысловой нагрузки и пользы вообще не несёт, достаточно просто оставить ul, и вместо list вписать более логичное с точки зрения семантики links. Давайте классы описывающие, что же тут ожидается, если это не переиспользуемые блоки конечно.

Comments

[Genri_Rus]

Это не модал, а скорее просто menu-mobile__container.

У меня меню появляется в виде модального popup окна

[strelok011]

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

[Genri_Rus]

strelok011, модальное окно разве не может быть на весь экран ?

Пример у многих интернет-магазинов:

[strelok011]

Вы увлекаетесь технической реализацией, а я вам советую обратить внимание на семантическую часть. ЧТО вы заворачиваете в этот всплывающий функционал. Так-то и выпадающий селектор на телефоне можно модалкой обозвать, т.к. он перекроет весь экран. По ссылке почитайте, что обычно вкладывают в понятие модалки.
Вам надо по смыслу содержания выписывать стили, чтобы было понятно, что же в этом контейнере содержится, а не как он будет отображаться. В зависимости от разрешения я могу заставить этот блок и выводиться просто в теле документа на большом экране, и превращаться во всплывающее окно на телефоне (например).

[Genri_Rus]

strelok011, ну покажите верстку, как вы бы семантически правильно сделали из моего примера ?

[Genri_Rus]

strelok011,

я вам советую обратить внимание на семантическую часть

Хотелось бы видеть от вас реальные примеры, потому как во многих популярных интернет-магазинах сделано именно так, как я делаю

[strelok011]

<nav class="navbar-center">
  <div class="menu-mobile">
    <button type="button" class="menu-mobile__open">
      <i class="icons__open_menu"></span>
    </button >
    <div class="menu-mobile__container">
      <div class="menu-mobile__header">
        <h2="menu-mobile__title">Меню</h2>
        <button type="button" class="menu-mobile__close">
          <i class="icons__close_menu"></span>
        </button>
      </div>
        <ul class="menu-mobile__links">
          <li class="menu-mobile__item">
            <a class="link" href="#">link</span>
          </li>
          <li class="menu-mobile__item">
            <a class="link" href="#">link</span>
          </li>
        </ul>
    </div>
  </div>
</nav>

Я бы верстал как-то так. Сейчас объясню почему:
1. если объект должен выполнить какую-то активность без перехода на другую страницу, то это кнопка, соответственно лучше использовать тег button.
2. если контейнер содержит навигацию по сайту - использую тег nav.
3. не использую пустые декоративные обертки, когда достаточно разметки для оформления. Основной посыл - контейнер стоит добавлять в том случае, если подразумевается, что внутри будет вложенных контейнеров больше 1.

[strelok011]

4. стараюсь максимально избегать обезличенной дивной верстки - это тупо не удобно разглядывать миллионы закрывающихся </div></div></div>....</div> (мне еще зачастую и интегрировать в шаблоны приходится)
5. смотрю на рекомендации БЭМ - по поводу вложенности и именования элементов в блоке, выделение отдельных блоков, выделение переиспользуемых компонентов и проч.
6. иконки - это отдельный компонент, описанный, собранный в спрайт и т.д. и т.п.

Так же советую использовать aria атрибуты (по крайней мере почитать при них вот тут например)

[Genri_Rus]

strelok011, спасибо, но у меня тут меню такое:

Т.е. как мне его сделать правильнее ?

<button type="button" class="menu-mobile__open">
     <span class="menu-mobile__open-line">0</span>
</button >

[strelok011]

Genri_Rus, можно и так, но я бы все же иконку вытащил в отдельный компонент, не зависящий от места размещения.
Только
<span class="menu-mobile__open_line">0</span>

БЭМ четко говорит - не делать в стилях вложение элемента в элемент. Плоский список классов должен быть. open_line - полное название элемента. Либо просто "menu-mobile__line"

[Genri_Rus]

strelok011, т.е. так будет лучше ?

<button type="button" class="menu-mobile__open">
     <span class="menu-mobile__line">0</span>
</button>

[strelok011]

Genri_Rus, да, это будет канонично.