В этом вопросе рассматривается процесс создания веб-приложений (не важно, на нативном JS или с фреймворками), где в каждом состоянии видны не все элементы или в зависимости от состояния отображение элемента отличается. Например, создание виджета "календарь" (date picker): сам этот виджет появляется только когда его вызывают кликом по полю ввода, да ещё он сам имеет несколько абсолютно спозиционированных страниц, наложенных друг на друга (с днями, месяцами, годами и так далее).
Вопрос такой: как организовать процесс вёрстки подобных элементов? Проблема в том, что для того, чтобы посмотреть, как изменилась, например, страница выбора месяца, нужно после редактирования кода каждый раз вызывать сам календарь, и ещё открывать страницу месяцев (и всё - даже при наличии Live reload).
Я сам использую такой подход:
- Создаю HTML-страницу без JavaScript-кода только для вёрстки и, собственно, верстаю там все элементы.
- Создаю HTML-страницу уже с подключением JavaScript-кода и из ранее свёрстанных элементов "собираю" виджет.
Главный недостаток этого метода заключается в том, что на стадии JavaScript-программирования обязательно появится потребность в новых классах, и, может быть атрибутах и ID. Тогда придётся править и исходную вёрстку тоже, иначе между исходной вёрсткой и реальным виджетом образуется очень большая разница и тогда внедрение нового функционала станет проблематичным.