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

Всем привет.
Видел проект с неплохой структурой, там для каждой страницы были свои медиа запросы и папка, и под каждый размер экрана свой файл например: 992, 768, 480, 320 для homepage итд. Лично я делаю миксином медиа запрос и мешаю всё вместе с обычным scss(в моём случае) кодом, но так как моя база стилей стала очень огромной я уже в ней запутался где какой запрос делал, интересно узнать как организуете свой код вы :)
  • Вопрос задан
  • 503 просмотра
Пригласить эксперта
Ответы на вопрос 4
EaGames
@EaGames
Front-end developer
Мне не нравится искать в одном файле 4 места где определяются стили для одного и того же блока, по этому я делаю все рядом.
.some-block {
	width: 1000px;
	@include desktop {
		width: 100px;
	}
	@include tablet {
		width: 10px;
	}
	@include mobile {
		width: 0px;
	}
}
Ответ написан
Комментировать
Путаниц не было, в конце каждого файла делаю медиа запросы

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

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

@include respond-to('xs') {
	.card {
		.link {}
	}
}
Ответ написан
Комментировать
Negwereth
@Negwereth
lvivcss.com.ua
Разнесите по файлам и подключайте через link с аттрибутом media. Сэкономите на размере запроса и браузер будет грузить только нужные стили
Ответ написан
Комментировать
dom1n1k
@dom1n1k
Я предпочитаю группировать стили по смыслу и по отношению к одному блоку, а не по отношению к размеру экрана.
Разделять размеры по файлам и тем более папкам кажется логичным только на первый взгляд. По факту так делают жертвы формализма в ущерб здравому смыслу.
Ну вот открыл я один из файлов, смотрю на код блока. Как я должен догадываться, как он себя поведет при уменьшении экрана? Лезть в другой файл? А потом в третий, четвертый... А может там и нет ничего - я не знаю заранее. А ещё часть стилей всегда общая для разных размеров - их тоже в отдельный файл?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы