Для чего в БЭМ т.н. «первый уровень вложенности», то есть «блок__элемент»?

Подскажите, для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?

Зачем весь этот цирк с двойным подчеркиванием и якобы вложенностью, но запретом на ее использование?

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

Вопрос почему кодеры так активно кричат "бэм это хорошо", если достаточно было сказать "ребята, научитесь УМНО пользоваться вложенностью", дескать каждый уровень вложенности это как золото, их нельзя делать 22, максимум 2 или 3??

ну то есть - зачем каждому элементу писать модификатор, отказывая себе во вложенности, если вложенность тут очевидна?
А если делать все равно вложенность, то на какой долбаться с ней без вложенности?

Хотелось бы услышать объяснения без ссылок на "какую-то там статью про бэм" в которой те, кто сломали себе мозг, ломают его остальным.

• БЭМ есть методология/философия - набор рекомендаций, а не стандарт разработки, поскольку она ничего не запрещает, а просто существует и все XD
  
• Правильно написанные стили (с БЭМ или без БЭМ) позволяют их использовать в других проектах без доработки
  
• Возможно, принципы БЭМ уходят к теории баз данных, где для хранения деревьев используют таблицу с parent__child__level, описывая элемент на предположим третьем уровне вложенности, мы просто указываем 1_4 2_4 3_4, просто в нашем случае выбрасываются те связи, которые не оказывают влияния на дочерний элемент. Обратите внимания, что порядок подключения файлов стилей и является тем самым полем level - расположи мы их в неправильном порядке и результаты нас неприятно удивят
  
• Следует стремится уменьшить число классов и их длину настолько насколько возможно, при этом оставив их читабельными
  
• Каждый уровень вложенности увеличивает число работы во много раз, перед тем как сделать уровень вложенности - нужно очень хорошо все взвесить
  
• Общепринятым решением является _один_модификатор_на_класс_ - но помните, что у DOM-элемента может быть много классов, просто если писать несколько модификаторов - число классов возрастет в n^2 раз согласно уровня вложенности - проще написать _theme_material и _color_red, _color_blue, _color_yellow в отдельных классах, чем писать каждый раз _theme_material_color_red, _theme_material_color_blue, _theme_material_color_yellow
  
• БЭМ допускает использование дефисов в именах классов, если они состоят из нескольких слов, но предпочтительнее использовать "верблюд" или вообще писать все в одно слово, поскольку выделение двойным щелчком в редакторе кода никто не отменял, а дефисы сломают от этого все удовольствие (ну или придется обучать ваших спецов настраивать их любимый редактор)
  
• Для совместимости с другими библиотеками рекомендуется использовать префикс для каждого проекта, так классы продакшена могут начинаться с "b-", например "b-menu__item", это должно окончательно устранить дублирование вашего и чужого кода, написанного опять же на БЭМ
  
• Общий принцип работы в БЭМ такой: сначала определите из чего состоит большинство ваших элементов. Например - вы используете header, footer, content, info, top, bottom и тд из которых состоят ваши блоки на странице. Все. Запомните, что они у вас всегда элементы. Блоков с такими именами быть не должно, запутаетесь и сломаете мозги. То есть на сайте у вас не может быть блока .header, потому что вы определили __header как элемент. Теперь на вашем сайте есть блок например .page, и у .page__header - и есть ваш хедер от сайта. Потом вы создаете продукт .product, и .product__header - это верх продукта. Следующий момент: иногда неразумно писать 10 классов, если этот кусок верстки встречается 1 раз и не повторяется. Создайте дополнительный блок! Так например, в шапке сайта находится совершенно уникальное поле для поиска, которого не видно больше нигде на сайте (на сегодняшний день) - назовите его .b-page-header-search и разбейте на элементы как угодно. Вам не нужно писать .b-page-header__элемент.b-page-search__element, поскольку общего у них будет ну разве что position relative. Когда дойдете до следующего поиска - вернетесь назад и исправите этот, не нужно продумывать на будущее, вы будете терять кучу времени в изучении и все равно запутаетесь.
  

<style>
.select__selectitem {...}
.menu__selectitem {...}
</style>
<div class="menu">
  <div class="menu__menuitem">
    Menu item 3
    <div class="select">
      <div class="select__selectitem menu__selectitem">option1</div>
      <div class="select__selectitem menu__selectitem">option2</div>
    </div>
  </div>
</div>

<style>
.select_type_in-menu .select__item {...} // БЭМ не_запрещает вложенность, если есть модификатор
</style>
<div class="menu">
  <div class="menu__item">
    Menu item 3
    <div class="select select_type_in-menu">
      <div class="select__item">option1</div>
      <div class="select__item">option2</div>
    </div>
  </div>
</div>

<style>
.select__item_type_in-menu {...}
</style>
<div class="menu">
  <div class="menu__item">
    Menu item 3
    <div class="select">
      <div class="select__item select__item_type_in-menu">option1</div>
      <div class="select__item">option2</div>
    </div>
  </div>
</div>