@E-em

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

Всем привет.
Видел проект с неплохой структурой, там для каждой страницы были свои медиа запросы и папка, и под каждый размер экрана свой файл например: 992, 768, 480, 320 для homepage итд. Лично я делаю миксином медиа запрос и мешаю всё вместе с обычным scss(в моём случае) кодом, но так как моя база стилей стала очень огромной я уже в ней запутался где какой запрос делал, интересно узнать как организуете свой код вы :)
  • Вопрос задан
  • 270 просмотров
Пригласить эксперта
Ответы на вопрос 4
  • EaGames
    @EaGames
    Мне не нравится искать в одном файле 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
    Я предпочитаю группировать стили по смыслу и по отношению к одному блоку, а не по отношению к размеру экрана.
    Разделять размеры по файлам и тем более папкам кажется логичным только на первый взгляд. По факту так делают жертвы формализма в ущерб здравому смыслу.
    Ну вот открыл я один из файлов, смотрю на код блока. Как я должен догадываться, как он себя поведет при уменьшении экрана? Лезть в другой файл? А потом в третий, четвертый... А может там и нет ничего - я не знаю заранее. А ещё часть стилей всегда общая для разных размеров - их тоже в отдельный файл?

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

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы