Дублировать контент или динамически адаптировать на js?

Question

[What have you done]

Дизайнер попросил чтобы при определённом разрешение контент (текст) был в другом разделе(Причем надо на нескольких разрешениях сделать). Что лучше использовать? Js или дубликат css?
js имею ввиду перенести через идентификаторы , дата-атрибуты в пустые ячейки. Дубликат через css и использовать display:none.
Что будет лучше ?

Comments

[Ankhena]

Во-первых, нужно смотреть конкретный макет. Может, это на гридах и с display: contents можно сделать.
Во-вторых, универсального ответа нет. Ведь приоритеты в разных проектах могут быть разными.

Я в большинстве случаев за то, чтобы страница без стилей выглядела и читалась логично. А значит, там ничего не дублируется.

Answer 1

[Максим Морев]

Критерии "лучшести" какие?
В поддержке обычно проще и очевиднее иметь дубль с говорящим названием: `.block__text` и `.block__text-mobile`, например. Иногда, если контент отличается прям сильно и в нескольких элементах, вплоть до замены самой корневой сущности: `the-hero`, `.the-hero-mobile`, хотя это крайний случай, конечно.

Однако каждая такая скрытая нода по-прежнему парсится браузером и участвует в построении DOM, что влияет на производительность. Если их становится "много" в относительном выражении, рассматривайте вариант динамической замены.

Answer 2

[imko]

Дубли

Answer 3

[Олег Кириллов]

Однозначно лучше продублировать, не очень элегантно, но практичнее и, что главное, намного понятнее и проще поддерживать. Я как-то тоже пошел на поводу у "сделать по красоте и без дублирования", а потом еще раз поменять попросили, и еще... Переплевался в общем на себя из прошлого.

Comments

[What have you done]

Я так понимаю тут палка о двух концах. Иногда просят чтобы не было дубля

[Олег Кириллов]

What have you done, да, я пишу под Vue и там, чтобы снизить градус дублирования в таких ситуациях, либо выношу дублирующийся блок в компонент, чтобы не править его в двух местах в случае чего, либо использую условный рендеринг, чтобы убрать дублирование в dom'е (ну или и то и то).