How to combine BEM and dynamic content?

Question

css

The other day we disagreed with a front-end developer.
I would like to know how to do it right.
I summarize:
1) The page is laid out according to the BEM rules https://ru.bem.info/
2) There is a block <div class="content">that contains dynamic content, for example, an article.
I stick to the fact that everything inside the content block should be clean html, i.e. without id, without classes, without unnecessary attributes.
Example 1:

<div class="content type-article">
  <h1>Заголовок <small>подпись</small></h1>
  <p>Текст, текст, текст.</p>
  <p>Текст, текст, текст.</p>
</div>

Accordingly, css inside the content block is written relative to the .type-article class (as part of the example).
The front-end developer says to use BEM.
Example 2:

<div class="content">

  <h1 class="title">
    <span class="title__main">Заголовок</span>
    <span class="title__label">подпись</span>
  </h1>

  <article class="article">
    <p class="article__p">Текст, текст, текст.</p>
    <p class="article__p">Текст, текст, текст.</p>
  </article>

</div>

As I see it, the problem is that if the html is edited in a WYSIWYG editor, and then cleaned up on the server with some tool like htmlpurifier, then it makes no sense to recreate the BEM structure later.

Answer 1

You have 2 problems here:
The structure issue is not about BEM, it's about semantics and SEO.
If you do not look at the structure and tags (whether to use small inside or span, whether to grumble in an article), then the question is, in essence, whether classes are needed on dynamic content or not. Considering that the content is dynamic, and there is no need to have classes on tags, it is permissible to make a cascade to tags from some block: for example, dynamic-content or content, text.
Why tags? Because WYSIWYG generates tags by default. But you can use some extra. tools that will tweak the final html, arrange classes, etc. (for example, with tools like https://github.com/posthtml/posthtml ).
If necessary, you can additionally mark tag styles with classes.

<div class="text">
  <h1>Caption <small>Some Foo Bar</small></h1>
  <article>
    <p>Lorem ipsum...</p>
    <div class="text__p">Dolor sit...</div>
  </article>
</div>

.text h1, .text__title { /* main title styles */ }
.text h1>small, .text__sub-title { /* sub-title styles */ }
.text p, .text__p { /* paragraph styles */ }

This way you encapsulate all custom styles in one place (one block) and have no problem creating content.