Как лучше организовать структуру медиа запросов и стилей?

Question

[E-em]

Всем привет.
Видел проект с неплохой структурой, там для каждой страницы были свои медиа запросы и папка, и под каждый размер экрана свой файл например: 992, 768, 480, 320 для homepage итд. Лично я делаю миксином медиа запрос и мешаю всё вместе с обычным scss(в моём случае) кодом, но так как моя база стилей стала очень огромной я уже в ней запутался где какой запрос делал, интересно узнать как организуете свой код вы :)

Answer 1

[Sergiu Mitu]

Мне не нравится искать в одном файле 4 места где определяются стили для одного и того же блока, по этому я делаю все рядом.

.some-block {
	width: 1000px;
	@include desktop {
		width: 100px;
	}
	@include tablet {
		width: 10px;
	}
	@include mobile {
		width: 0px;
	}
}

Answer 2

[Alexander Pushkarev]

Путаниц не было, в конце каждого файла делаю медиа запросы

card.scss

.card {
	.image {}
	.link {}
	.description {}
}

@include respond-to('md') {
	.card {
		.image {}
	}
}

@include respond-to('xs') {
	.card {
		.link {}
	}
}

Answer 3

[Negwereth]

Разнесите по файлам и подключайте через link с аттрибутом media. Сэкономите на размере запроса и браузер будет грузить только нужные стили

Answer 4

[dom1n1k]

Я предпочитаю группировать стили по смыслу и по отношению к одному блоку, а не по отношению к размеру экрана.
Разделять размеры по файлам и тем более папкам кажется логичным только на первый взгляд. По факту так делают жертвы формализма в ущерб здравому смыслу.
Ну вот открыл я один из файлов, смотрю на код блока. Как я должен догадываться, как он себя поведет при уменьшении экрана? Лезть в другой файл? А потом в третий, четвертый... А может там и нет ничего - я не знаю заранее. А ещё часть стилей всегда общая для разных размеров - их тоже в отдельный файл?

Уж лучше побить интерфейс на более мелкие блоки и сделать их максимально независимыми. Но внутри блока код пусть будет в одном файле и рядом. Да, медиа-запросы получаются не полностью оптимальными, да, объем кода получается чуть больше, но меня это не парит.