How long can modifiers be in BEM?

Question

HTML

Can you tell me how to make such a BEM block?
In my case, it turns out that the modifiers are stretched
. And if everything is not done through profile__, then I will get 3 bam blocks in the block, which will then reduce my options for the names of other main blocks on the page
https://codepen.io/user2022nn/pen/MWrqyrw

Answer 1

* These are not modifiers, but elements
. They can be as long as required, and in any quantity, the methodology does not regulate this.
At some point, you will run into the fact that the volume of block styles becomes impossible to maintain and you need to decompose it into smaller blocks.
If this is immediately obvious, then it is better to decompose immediately.

will reduce my options for the name of other main blocks on the page

Create inner blocks with a common namespace, in your case the main component is `profile`, the inner ones are ` profile -info`, ` profile -page`, and stack them so that the parent-child relationship between the blocks is obvious.
Well, yes, in that case, technically you can no longer create a non-child block with a `profile` namespace, so as not to get confused, but there are no other options, and you have to choose the lesser of two evils.
From my point of view, the choice between a thousand-line monster component and three or four smaller ones is not worth it at all - you should definitely choose smaller components, even if you operate only with styles.
If you use frameworks and there is also some kind of logic in the components, then even more so.
Intersections between such global categories are generally not as frequent a scenario as it might seem, and narrower names can always be chosen.
I answered a similar question here - take a look.
https://qna.habr.com/q/1129178#answer_2136844