Наша цель - переверстать текущий дизайн https://exchangesumo.com/ с максимально производительными стилями, устойчивыми к постоянным заменам блоков.
Без внешних изменений. Поблочная верстка + рефакторинг JS (jQuery допускается), который затрагивает отрисовку.
Первичная задача: оценка по срокам и часам верстки главной страницы, оценка рефакторинга js, дополнительно - сколько займет верстка в том же формате этих шаблонов страниц https://exchangesumo.com/exchanger/
https://exchangesumo.com/obmen/QIWIRUR-MONOBUAH/
Мы можем выбрать одну стороннюю либу, если это сократит трудозатраты. Желательно одну, которая совместит нужный нам функционал (попап регистрации, тултипы, табы). Это не обязательно Bootstrap, главное - баланс между сокращением трудозатрат и размером либы.
https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee07949215ad4
Если мы юзаем scss/sass, импортируем из Бутстрапа только то, что используем.
<aside> 💡 Под блоком подразумевается потенциально заменяемая часть DOM, которая для отрисовки использует только классы из релевантного файла с тем же названием + универсальные классы, которые могут использоваться где угодно.
</aside>
В верхнюю ноду помещаем id или атрибут с названием + вариант. Например, data-block="search" и data-variant=1. В таком случае стили этого блока соотносим с файлом search.css Если на ноде висит функция, то см. Управляющие скрипты ниже.
data-variantу классического дизайна всегда 1.
В файл блока помещаем только те стили, которые ссылаются на классы/id/атрибуты для этого блока. Всё, что используется для скриптов или классы, меняющие поведение и которые можно юзать в другом месте, пишем в base
Элементы не видимые на странице также делаем отдельным блоком. Тут уже масштабируйте по усмотрению - попапы будут в едином формате и думаю, что 1 файла на все будет достаточно.
В финальной версии все CSS-файлы будут объединены по принципу: если блок находится в видимой области - в critical.css, если за границей скролла - в blocks.css с приоритетом загрузки: base.css + critical.css, затем blocks.css