Why in BEM so-called. "first nesting level", i.e. "block_element"?

Question

HTML

Tell me why in BEM the so-called. "first nesting level", i.e. "block_element"?
What is the difficulty in having only elements or only blocks (whatever you call them) that are nested and have modifiers?
Why all this circus with double underlining and supposedly nesting, but a ban on its use?
The ban is clear to me - due to the fact that browsers sort styles by nesting level - the more - the later they will be applied, the ban is justified, that is, use it carefully.
And why introduce a double underscore, if the element can be with the specified parent as a modifier?
BEM:

.calculator {}
.calculator__button {}
.calculator__button_theme_material {}
.calculator__button_color_red {}

Option 2:

.calculator {}
.button {}
.button_theme_material {}
.button_color_red {}

ИЛИ:
.calculator .button {} (ЧТО БЭМ НЕ РЕКОМЕНДУЕТ...)
ИЛИ:
.button_parent_calculator {}

It is clear, for example, that BEM was created in one _large_ Russian company. And as we know, in a Russian company, the bosses, as a rule, have difficulty understanding technology, but they consider programmers to be something like toasters - they invested bread, got a solution, and does not show off. But for the purpose of bonuses, it sets requirements in the form of "brilliant ideas". Here BEM was born as such a brilliant idea, when the leadership was simply confused by this nonsense. Then money was poured into him for promotion and he became brilliantly popular.
The question is why coders are so actively shouting "bam this is good", if it was enough to say "guys, learn to use nesting SMARTLY", they say each level of nesting is like gold, they cannot be done 22, max 2 or 3??
==
Again, take this example:

.calculator_theme_material {}
.button_theme_material {}
.calculator__button_theme_material {}
.select_theme_material {}
.calculator__select_theme_material {}
.select__button_theme_material {}
.select__field_theme_material {}
.select__hiddeninput_theme_material {}
.select__input_theme_material {}
....blablabla_theme_material {};

and here is the version without any bems:

.calculator {}
.calculator_theme_material {}
.calculator .button {}
.calculator_theme_material .button {}

Well, that is - why write a modifier to each element, denying yourself nesting, if nesting is obvious here?
And if you do all the same nesting, then what kind of fucking with it without nesting?
I would like to hear explanations without references to "some kind of article about bam" in which those who have broken their own brains are breaking it to others. We need real things, at the moment BEM looks like a PR stunt that distinguishes "non-coders" from "coders", much like Bitrix.

If you write on Bitrix, you are cool. Just got to deal with the fact that he's awful.

Answer 1

my IMHO, bam is needed only so that any block can be cut and pasted anywhere and not break the css at the same time, with your example:
.calculator__button {}
and if it’s the same for the buttons, you will have 10 variations, when you transfer it, it may be difficulties.
.calculator .button
in general, I see the point in this technology only in ultra-large projects and sites with 100,500 hand-made pages that are constantly changing.

Answer 2

BEM is about block independence, that's all. Should I join a sect? Everyone decides for himself. Any small site / landing or something larger can live very comfortably without a bem, this is a fact.
At some point, I myself decided that it was better to have some kind of methodology, and bem has no serious alternatives today, I had to join. As for code redundancy, classes there and all that, cool dudes don’t write with pens, they use the full stack from Yandex. I just wrote a wrapper for pug and made my gulp build.

Answer 3

Let's say I did as you wrote:

.calculator {}
.calculator_theme_material {}
.calculator .button {}
.calculator_theme_material .button {}

And then I added some third-party theme to the page, which also likes the wonderful .button, and uses it. As a result, my button collapsed, or I need to override ALL styles that are declared in .button in a third-party theme.
-------
in BEM we have components (blocks) that are easy to use and easy to reuse ; it improves the perception of the project; this is convenient in combination with modern frameworks like React;
Looking at the BEM block, I immediately see that this button belongs to the block, I know where it will be in the styles, I know that it will not be affected by any extra global / third-party styles.
It's just convenient, after all, but your furious hat looks weird. )