Another question regarding BEM?

Question

css

What about multilevel nesting?
I type in a mix with bootstrap. Well, okay, that's not the point =)
Here's an example:

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

I often encounter this problem. What solutions do you know?
The problem occurs here:

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

If there is another block inside, what should we call it?<div class="searchbar__megamenu-tag"><div>

Answer 1

I counted five components: c-searchbar, c-searchbar-menu, c-searchbar-dropdown, c-searchbar-megamenu, c-searchbar-megamenu-tags( bem with prefixes )
should look like this

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

There is a subtle point, the style of the component should not contain positioning rules. That is, you should not set margin, padding, position (and something else) in the class c-searchbar-dropdown, but should use for these purposes c-searchbar__dropdown. If the component c-searchbar-dropdown does not have positioning rules, then you can (probably) remove the classc-searchbar__dropdown