В чём преимущество build-time CSS над runtime-CSS?

Question

Build-time CSS генерируется во время сборки и доставляется браузеру как обычные CSS-файлы. Это быстрее, потому что браузеру не нужно выполнять JS для создания стилей. Такой подход уменьшает размер JS-бандла и улучшает время первого рендера. Runtime-CSS даёт больше гибкости, но платит за это производительностью.

YeaHub · Accepted Answer

Разница между build-time и runtime CSS — в том, когда создаются стили.ОпределениеОпределение: Build-time CSS — стили, которые полностью формируются во время сборки и не требуют выполнения JavaScript в браузере.Преимущества build-time CSSБыстрый первый рендерCSS доступен сразу, без ожидания JS.Меньше JavaScriptНет логики генерации стилей в рантайме.ПредсказуемостьСтили не зависят от порядка рендеринга компонентов.Лучше для SSRCSS можно отдать сразу с HTML.Проще дебагВ итоге это обычные CSS-файлы.Когда runtime-CSS всё ещё нуженСтили зависят от runtime-данныхразмеры DOMположение скроллаОчень динамичные UIанимации, вычисляемые в JSБыстрое прототипированиеВыводBuild-time CSS выигрывает в производительности, размере бандла и стабильности рендера, поэтому всё чаще используется в продакшене, а runtime-CSS остаётся инструментом для специфических динамических случаев.