Как сочетать BEM и динамический контент?

Question

[nsf4]

На днях разошлись в мнениях с front-end разработчиком.
Хотелось бы выяснить как нужно делать правильно.

Резюмирую:
1) Страница сверстана по правилам BEM https://ru.bem.info/
2) Есть блок <div class="content"> в котором находится динамический контент, например статья.

Я придерживаюсь, что все, что находится внутри блока content должно быть clean html, т. е. без id, без классов, без лишних атрибутов.
Пример 1:

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

Соответственно css внутри блока content пишется относительно класса .type-article (в рамках примера).

Front-end разработчик говорит, что нужно применять BEM.
Пример 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>

Как мне видится проблема в том, что если html отредактирован в WYSIWYG редакторе, а потом почищен на сервере каким-нибудь инструментом по типу htmlpurifier, то воссоздавать потом BEM структуру не имеет смысла.

Answer 1

[Алексей Ярошевич]

У вас здесь 2 проблемы:

• нужны ли классы для динамического контента;
  
• как, если нужно, модифицировать структуру динамического контента.

Проблема структуры не относится к BEM, она относится к семантике и SEO.

Если же не смотреть на структуру и тэги (использовать ли small внутри или span, заворчивать ли в article) — то вопрос в сущности нужны ли классы на динамическом контенте или нет. Учитывая, что контент динамический, и нет необходимости иметь классы на тэгах, то допустимо сделать каскад на тэги от некоторого блока: например, dynamic-content или content, text.

Почему именно теги? Потому что WYSIWYG по умолчанию генерирует теги. Но вы можете использовать какие-то доп. инструменты, которые подправят итоговый html, расставят классы и т.д. (например, с помощью инструментов типа https://github.com/posthtml/posthtml ).

При необходимости можно дополнительно пометить стили тегов классами.

<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 */ }

Таким образом вы инкапсулируете все пользовательские стили в одном месте (одном блоке) и не имеете проблем с созданием контента.

Comments

[i]

Будет замечательно еще в ответе раскрыть тему WYSIWYG-редактора

[Алексей Ярошевич]

Даж не знаю что там можно добавить. Добавил posthtml ;-)

Answer 2

[matperez]

Не важно сколько у вас посетителей в месяц. Применение BEM означает, что вы можете переместить блок в любое место без необходимости в менять разметку. В этом плане элемент .article__p выглядит по меньшей мере странно. Я с вами согласен: если у вас есть блок внутренности которого не меняются, нет смысла добавлять к ним дополнительные классы или идентификаторы, достаточно просто .article p {}.