Как эффективно организовать работу с media запросами?
Добрый день!
Делаю лэндинг с адаптивной версткой через медиа-запросы и сталкиваюсь с тем, что с увеличением стилей под различные устройства усложняется тем, что приходится много скроллить.
В css файле у меня есть основные стили под десктоп (без медиа), и медиа в таком случае должны распологаться вконце файла, что не удобно, так как при разработке приходится много скроллить вверх-вниз.
Вариант сделать несколько css-файлов не удобен тем, что в brackets одновременно может быть открыто только 2 окна - css и html (в моём случае), поделить экран на 3 зоны нельзя.
Подскажите эффективные практики для удобной разработки css стилей для различных устройств
Используйте препроцессор и разбивайте на файлы, на выходе будет один или несколько css в зависимости как настроить. Обычно используются ещё сборщики для объединения медиа запросов, и тогда их можно прописывать внутри блоков добавить к этому миксины и переменные, исходник становится более читаемым, а на выходе оптимизированный css.
Препроцессинг SASS (в синтаксисе scss или нет - не важно), а также stylus (опять же на ваше усмотрение). Все это реализовано для оптимизации таких и не только задач