Задать вопрос
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
html

Очередной вопрос касаемо БЭМ?

Как быть с многоуровневой вложенностью?
Верстаю в миксе с бутстрапом. Ну да и ладно суть не в этом =)
Вот пример:
<div class="searchbar">
    ...
		<ul class="searchbar__nav">
			<li class="dropdown searchbar__dropdown searchbar__item">
				<a href="#" class="dropdown-toggle searchbar__link" data-toggle="dropdown">Country <b class="caret"></b></a>
				<div class="dropdown-menu searchbar__megamenu">
					<div class="container">
						<div class="searchbar__megamenu-header">
							<div class="searchbar__megamenu-tags">
								<div class="searchbar__megamenu-tag">CZECH REPUBLIC <button type="button" class="remove-tag"></button></div>
								<div class="searchbar__megamenu-tag">CONSUMERS ELECTRONICS</div>									
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
	...
</div>

Часто встречаюсь с этой проблемой. Какие решения вы знаете?
Проблема возникает тут: 
<div class="searchbar__megamenu-tags">
	<div class="searchbar__megamenu-tag">CZECH REPUBLIC <button type="button" class="remove-tag"></button></div>
	<div class="searchbar__megamenu-tag">CONSUMERS ELECTRONICS</div>									
</div>

Если внутри <div class="searchbar__megamenu-tag"><div>есть еще блок, как его называть?
  • Вопрос задан
  • 499 просмотров
5 комментариев
Подписаться 1 Оценить 5 комментариев
Пригласить эксперта
Ответы на вопрос 1
devellopah
@devellopah
я насчитал пять компонентов: c-searchbar, c-searchbar-menu, c-searchbar-dropdown, c-searchbar-megamenu, c-searchbar-megamenu-tags(бем с префиксами)

соответсвенно выглядеть должно так

<div class="c-searchbar">
    ...
    <ul class="c-searchbar__menu c-searchbar-menu">
			
      <li class="dropdown [ c-searchbar__dropdown c-searchbar-dropdown ]">
        <a href="#" class="dropdown-toggle [ c-searchbar-menu__link ]" data-toggle="dropdown">Country <b class="caret"></b></a>
        <div class="dropdown-menu [ c-searchbar__megamenu c-searchbar-megamenu ]">
          <div class="container">
            <div class="c-searchbar-megamenu__header">
              <div class="c-searchbar-megamenu__tags c-searchbar-megamenu-tags">
                <div class="c-searchbar-megamenu-tags__item">CZECH REPUBLIC <button type="button" class="remove-tag"></button></div>
                <div class="c-searchbar-megamenu-tag__item">CONSUMERS ELECTRONICS</div>									
              </div>
            </div>
          </div>
        </div>
      </li>
			
			<li class="c-searchbar-menu__item"></li>
			
    </ul>
  ...
</div>


Есть тонкий момент, стилистика компонента не должна содержать правил позиционирования. То есть ты не должен задавать margin, padding, position(и что-то ещё) в классе c-searchbar-dropdown, а должен для этих целей использовать c-searchbar__dropdown. Если же компонент c-searchbar-dropdown не будет иметь правил позиционирования ,то можно(наверное) убрать класс c-searchbar__dropdown
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы