xmoonlight

Думаю, что Вам нужно больше практики.
Всё напрямую зависит от конкретной задачи: где-то - проценты, где-то - область отображения, где-то - поинты.

SVG

Общий css и несколько отдельных css под сегментированые разрешения экрана. Каждый сегмент - подгружает свой css через @media @include.

Многое зависит от того, как должна работать "растяжка" при резиновой вёрстке: сайзим шрифты или нет?

Вообще: calc(), vmin, vmax, vw, vh (и процентов для вложенных блоков) должно хватить для "удержания" всех размеров без видоизменения внешнего вида на разных мониторах и разрешениях.

Чистый код html/css/js.
Это всё, что нужно для реализации хорошего и легко поддерживаемого проекта.

Забыли про виртуальные блоки max-width, max-height и прямой класс элемента (не контейнер).
Тогда будет в 2-3 раза меньше кода и стилей.

Научитесь верстать качественно макеты для любых разрешений.
Учите css grid/flex, медиа-запросы, чередования списков с помощью css-селекторов, авто-установку светлой или тёмной темы по настройкам браузера, и т.д.

JS пока вообще не трогайте, пока не научитесь хорошо верстать саму разметку для любого предоставленного вам макета.

json, timeout, append()

Учите @media-запросы в css.
Этого - точно хватит для реализации адаптива!

Это всё реально сделать на css без js:
1. Таймер после загрузки - через анимацию.
2. Нажатие - через флаг: checked.

Но а смысл так извращаться?
У Вас нет ни одного js на странице или в чём цель: "без js"?!

Проитерировать все объекты DOM по всем вариантам стилей задания цвета.
Цвет зелёный - заменяем.

Или заранее прописываем какое-то свойство (класс) для всех объектов с зелёным цветом и итерируем по этому фильтру.

На JS, используя HTML и чуть геометрии.