WebDEV(@webb_dev). 💡 Ошибка: беспорядок в медиазапросах Частая ошибка — смешивать mobile-first и desktop-first подходы

💡 Ошибка: беспорядок в медиазапросах Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width, используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку. Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

@media (min-width: 1024px)

должно получиться:

$laptop-landscape: 1024px;

@media (min-width: $laptop-landscape)

Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой). Продолжение следует... WebDEV #советы #web