Стоит ли в данном случае писать стили в media запросе?

Question

[Никита Савельев]

Я делаю адаптив через min-width. Есть хедер, и при увеличении экрана в нем появляется меню.

.menu {
	display: none;

	@media (min-width: $screen-md) {
		display: block;
	}
}

Вопрос вот в чем. Стили для элементов меню нужно писать в media или нет?

.menu {
	display: none;

	@media (min-width: $screen-md) {
		display: block;
	}

	&__list {
		@media (min-width: $screen-md) {
			display: flex;
			align-items: center;
		}
	}
}

С точки зрения mobile-first есть ли какая-нибудь разница, писать стили сразу или в media?

Answer 1

[Илья Корень]

если стили написаны для элементов, которые будут отображаться только при min-width: $screen-md - тогда нет.
Нет смысла, т.к. во всех других брейкпоинтах этих элементов тупо не будет, т.к. будет display: none.
Стили с использованием медиа запросов нужно писать тогда, когда логика это подразумевает, когда элемент при разной ширине экранов должен выглядит по-разному. В остальных случаях нет.