Задать вопрос
@nsf4
html

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

На днях разошлись в мнениях с 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 структуру не имеет смысла.
  • Вопрос задан
  • 708 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
qfox
@qfox
Ответы есть у меня
У вас здесь 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 */ }


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Установить систему Linux
26 апр. 2024, в 17:24
2000 руб./в час
Перенести базу знаний в формат lms (На подобии Obsidium)
26 апр. 2024, в 17:02
35000 руб./за проект
Составить единую таблицу SQL
26 апр. 2024, в 16:51
2000 руб./в час
Ещё заказы