Если предполагается, что никто после вас не будет редактировать выходной CSS, и весь проект будет собираться сборщиком, то второй вариант удобнее, т.к. получается удобный компонентный подход.
Допустим, есть компонент "кнопка", и для него отдельный файл
/blocks/button.scss, очень удобно писать стили для этой кнопки только в этом файле. И если соблюдать БЭМ, если создавать переменные, то позже, этот компонент (блок) можно будет использовать в других проектах, без дополнительного редактирования. Скопировал файл, поменял
переменные (для оформления, цвет, отступы, размеры, шрифт и.т.д.), подключил и готово.
Но одно замечание, лучше сразу определите миксины (или переменные) для этих медиа запросов, чтобы не было сотни разных медиазапросов аля 300px, 320px, 400px и.т.д. Можно позаимствовать из
Bootstrap 4
Первого варианта придерживаюсь при написании стилей на чистом css и без сборщиков, т.к. легче писать последовательно для разных устройств. Но такое случается редко, только если поддерживать старый проект.