How to understand BEM, and what motivates a layout designer to use it?

Question

Layout

As a back-end player, it's hard for me to get along with this BEM. Why BEM when there is SASS/SCSS/LESS. Recently, I needed to put the layout on the engine and this is what I saw on the first page:

<button class="custom__button black__button login__forgot reg__button right__part mob-full__width">
create an account
</button>

The button is simple, background and color.
Six classes for a simple button in registration. My code in the IDE from JetBrains goes far beyond the white stripe. To the question of the layout designer what it is: "It's a bam, I use the same style several times, etc." We argued for a long time, why can't you get to the child element through the parent? where is the brevity? where are the mixins? why don't you do inherit classes in your SCSS?. And when I looked through the code through the developer panel, I saw a real MMO RPG PVP battle, tooth for tooth, style for style, everything is interrupted 3 times. So for me, BEM is generally a huge crutch and not a methodology.

Answer 1

class="custom__button black__button login__forgot reg__button right__part mob-full__width"

You have been blatantly lied to. This is shitcode.
Understand BEM

Answer 2

I’m sitting reading, dying))) How much they want to simplify everything to the impossible and still they will find a hidden conspiracy of extraterrestrial civilization in three letters)
Block - Element - Modifier ... everything ... This is BEM, namely how they "having sex" and in what "poses" - so it will be clearer than about underlining)
Methodology is the path to enlightenment, the constant desire and striving for improvement. You can understand his method of BEM only when you understand that you are not stupidly poking at the keyboard so that the frame does not leave, but you are doing Fast, Clear and Correct - Fast, Clear and Correct product. When six months later you are asked to finish something and you do not stick half a day into the code in order to understand how you (six months ago) did all this with "inheritance" and "6th classes" so quickly, and the rest of the day catch bugs throughout the site (although it seems to me that this is not about the author).
A note to the TS: you really don't need it, since you came to this only in order to consolidate your convictions - this is one.
Where is the conciseness? Block Element - here it is! it's 2 words, 12 characters. And believe me, what they do is much more concise than writing a bunch of code in a mixin, then keeping it all in your head and calling, debugging, and so on and so forth.
And for the backs - you are also chasing WHAT ??? ))))) (no offense)) You don't like the line is long, but the fact that to call the same { .on('click', ... ) } several hundred lines of code are loaded into the project, why are we silent?) - disorder).
And in the end - we are all smart, we all know everything, but I dig the Internet and, frankly, I do not see the implementation of "know-how" on a sufficient scale. Everything everywhere is crooked, oblique, and only somewhere (very occasionally) is the initial idea to implement everything according to the mind visible.

Answer 3

In my opinion, BEM is understandable just for backend workers, this is, in principle, the only sensible idea from those that are on the front!!!
Potentially, there is still WebAssembly to remove the ShitScript, but this is still a prospect.
A layout designer needs to be flogged... and flogged until he learns.
BEM has only one problem, and your case is not rare, people do not understand at all due to mass stupidity.
BEM is good in two cases, either for a web studio that has many projects or for large projects. The main idea is that the first letter is a Block, and any block is absolutely independent of the environment, so you can put it anywhere in the project and not worry, unlike Bootstrap, in which everything is tied to everything and when you try change something, climbs a lot of problems in different places.