💡 Ошибка: беспорядок в медиазапросах
▍Часть 2
В scss есть возможность вкладывать медиазапросы в правила. Например:
.block {
width: 100%;
@media screen and (min-width: 768px) {
width: 60%;
}
}
Это будет скомпилировано в:
.block {
width: 100%;
}
@media screen and (min-width: 768px) {
.block {
width: 60%;
}
}
Так писать медиазапросы довольно удобно, тогда один селектор будет встречаться строго в одном месте в стилях. В таком случае обязательно использовать переменные для основных брейкпоинтов. Должно быть так, чтобы по названиям переменных можно было легко определять, какой брейкпоинт соответствует устройству (по спецификации и макетам проекта), а какой был написан специально под контент.
Большое количество медиазапросов не сказывается ощутимо на производительности, но, разумеется, сказывается на весе css документа. Если у вас большой проект со сложной организацией контента, медиазапросов много, то стоит задуматься об их комбинации.
WebDEV #советы #web
