Вынесение стилей адаптивности за пределы общих стилей

Всем доброго времени суток! Мой стек это React, scss, module css. Мне всегда казалось, что медиа запросы в файлах стилей сильно усложняют читаемость css кода, возникло желание вынести этот функционал в другой файл. Пока вижу это либо как отдельный файл с медиазапросами, при этом к компоненту или блоку будут применяться сразу 2 класса (базовый для настольной версии и класс с адаптацией под мобильные устройства и планшеты), либо как полноценно разные классы для каждого варианта верстки, которые будут применяться исходя из muchMedia с помощью тернарного оператора, или типа того.

В связи с этим вопрос, есть ли какие то хорошие практики, уже внедренные подходы или может кто то сам для себя нашел удобный и оптимизированный подход для решения этой проблемы?