Как правильно подключить стили для мобильной версии сайта?

Question

[Кирилл Абдулов]

Есть сайт который написан для десктопов, теперь нужно сделать его адаптивным для мобильных устройств.

Я делаю так:

@media screen and (max-width: 800px) {
    * {
        display: block; /* просто проверка */
    }
}

Моя проблема в том, что такие стили не применяются без !important. Я понимаю, что это происходит потому что стили которые я пишу с медиа-запросом не "покрывают" стили desktop - версии, а отображаются вместе с ними.

Я пишу стили с медиа запросом в файле со стилями для desktop-версии сайта, и понимаю что это плохо, но как сделать иначе не знаю. И ответы которые я находил на свой вопрос были 3-8 летней давности, поэтому я подумал что возможно что-то могло поменяться.

Как правильно подключить CSS-стили для мобильной версии сайта чтобы подключались исключительно стили для мобильной версии без стилей для desktop-версии?

Answer 1

[Ankhena]

Разумнее подход mobile-first.
Все media пишутся по min-width начиная от меньшего.
Не важно, что макет у вас только десктопный. Напрягитесь и пересчитайте.
Доля мобильного трафика больше, чем десктопного.

Если всё же desktop-first, то по max-width в обратном порядке, начиная с большей ширины.

Сами media пишутся внизу файла css, если вы не разбиваете файлы на блоки.
Возможно, вам удобнее писать media прямо под селектором.
Тогда при сборке хорошо бы прогнать файл через плагин группирующий media условия и ставящий их вниз файла.

Если вам нужен !important, то скорее всего в основной части использована слишком большая вложенность селекторов. А потом пишете простой селектор или селектор с меньшим весом.
Прочитайте про специфичность селекторов и/или упростите код.

Остальное на конкретном примере.

Answer 2

[aeroseo]

Была как-то идея дифференцировать подключение отдельно таблиц стилей для < 768px и отключения десктопных/планшетных. Интересно, сие кто-нибудь реализовал?)