React стилизация и медиа запросы для адаптивного дизайна?

Question

[formasters777]

Рассмотрел 4 варианта стилей сss и React,
но какой в данном случае лучше использовать для адаптивного дизайна.
Например, есть ли разница при использовании библиотек и более стандартных способов по скорости исполнения,
или просто выбрать один из способов и его использовать постоянно.

Comments

[Just Me]

перечисли варианты

[formasters777]

-inline-стиль example: <h1 style={{ backgroundColor: "lightblue" }}
-inline- с переменными, например,

const mystyle = { backgroundColor: "lightblue" }
return ( <h1 style={ mystyle }> Text </h1>

, названия переменной можно и с большой буквы.
-просто импорт .css файлов и классы className для элементов
-сss-modules
-styled components
-Tailwind
Из всех этих вариантов наверно это сss-modules и styled-components?

[strelok011]

Юзай styled-components.
Создавай лейаут-компоненты для оборачивания страниц.
Делай универсальные переиспользуемые компоненты для контейнеров.
Пиши в стайлед компонентах медиазапросы для изменения на брекпойнтах.
Верстай mobile-first (по дефолту стиль для мобилы, потом вкладываешь медиазапрос в стиль с описанием вида после брекпойнта (правило min-width...).
Не важно что ты используешь - если умеешь верстать адаптивно, какая разница на чем?
И это - инлайн стили это зло.

[Just Me]

импорт scss модулей и классы className для элементов