Как часто объявлять media query?

Question

[Марк Иваныч]

Добрый день, использую отдельный css-файл для каждого блока в проекте. Сайт адаптирован под телефоны.
Пример:
header.css
contenr.css
block1.css
и тд.

Сейчас для мобильной версии media query используется в одном файле, пример:
mobile-480.css

@media (min-width: 0px) and (max-width: 480px) {
/* Здесь все стили для всего сайта под 480px */
}

Соответственно это не удобно! Есть ли у кого опыт множественного включения media query ?
Т.е гораздо удобнее вызывать media query в каждом отдельном css файле:
header.css
contenr.css
block1.css
Отразится ли это на производительности и тп....?

Comments

[Евгений Петров]

использую отдельный css-файл для каждого блока в проекте

Зачем???

[Марк Иваныч]

Евгений Петров: https://ru.bem.info/
Мне одному не нравится скролить двухметровый css-файл?

[Maksim Zverev]

Используйте уже css препрцессоры (SASS, LESS, Stylus) и забудьте про проблемы.

[Евгений Петров]

Иваныч Марк: В development хоть тыщу файлов импортируйте. А в production склейка.

[Марк Иваныч]

Maksim Zverev: По этому понял, благодарю

[Марк Иваныч]

Евгений Петров: Ну так и я о том же)

[Марк Иваныч]

Maksim Zverev: SASS, LESS, Stylus ими можно только инклюдить необходимые css-блоки для мобильной версии в media query?

[Maksim Zverev]

Иваныч Марк: Марк, я пожалуй отвечу ссылкой, где подробно расписывается работа media query в sass habrahabr.ru/post/156645

Answer 1

[Котик Антон]

1. Пишите стили для мобильных версий прямо в файлы блоков
   
2. Используйте grunt (или gulp)
   frontender.info/grunt-is-not-weird-and-hard
   frontender.info/a-beginners-guide-to-grunt-redux
   
3. Используйте плагин для объединения media query:
   grunt-combine-media-queries
   gulp-combine-media-queries
   

min-width: 0px

Что за дискриминация устройств с отрицательной шириной экранов?)

Comments

[Roman]

я возмущен, это непрофессионально, чувствую он ещё хаки под netskape игнорирует!

[Марк Иваныч]

Еще не совсем разобрался. Выходит плагин допустим для gulp сам вытащит media query из указанных файлов и вставит их куда потребуется?

[Котик Антон]

Иваныч Марк: Плагин для grunt находит все media query в файле, объединяет одинаковые запросы, и помещает их в конец файла. Для gulp, наверно, работает также, не проверял.

Было:

.block-a {
    color: red;
}

@media (max-width: 480px) {
    .block-a {
        color: blue;
    } 
}

.block-b {
    color: blue;
}

@media (max-width: 480px) {
    .block-b {
        color: red;
    } 
}

Станет:

.block-a {
    color: red;
}

.block-b {
    color: blue;
}

@media (max-width: 480px) {
    .block-a {
        color: blue;
    }

    .block-b {
        color: red;
    } 
}

[Марк Иваныч]

27cm: По моему круто и просто. Поюзаю...

[Котик Антон]

Если при этом использовать ещё и препроцессор, то исходный файл будет ещё короче.
Пример на LESS:

.block-a {
    color: red;

    @media (max-width: 480px) {
        color: blue;
    } 
}

.block-b {
    color: blue;

    @media (max-width: 480px) {
        color: red;
    } 
}