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

Question

[Alibek Kulseitov]

Как быть с многоуровневой вложенностью?
Верстаю в миксе с бутстрапом. Ну да и ладно суть не в этом =)
Вот пример:

<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>есть еще блок, как его называть?

Comments

[Ярослав Иванов]

Верстаю в миксе с бутстрапом. Ну да и ладно суть не в этом =)

На этом можно и закончить

Ну что это такое ?

Если внутри <div class="searchbar__megamenu-tag"><div>есть еще блок, как его называть?

Для этого нужна фантазия. Теперь каждый раз будете задавать вопрос как вам класс назвать ?

[Alibek Kulseitov]

Ярослав Иванов: Да, потому что я Перфекционист и когда встает такой вопрос наименования класса я долго сижу думаю)) ну вообще в миксе с бутстрапом можно верстать с помощью бэм =) Я предварительно почитал статьи и пишут что можно.

[Alibek Kulseitov]

Ярослав Иванов: Да дело не в фантазии, таких случаев много) Потому что searchbar__megamenu-tag-remove думаю уже перебор =)

[Ярослав Иванов]

Алибек Кулсеитов: Да можно и в миксе с классами на кирилице только какой от этого толк ?

[Alibek Kulseitov]

Ярослав Иванов: Имеете ввиду какой толк от бэма если делать в миксе с бутстрапом)? Ну читаемость кода лучше становиться думаю и всё как-то более организованнее =)

Answer 1

[Islam Ibakaev]

я насчитал пять компонентов: 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