Еще один заголовок для этого поста может быть такой:
Почему на десктопе иногда показываются правила CSS для мобильной версии?
Часто сервисы типа PageSpeed Insights предлагают разделить CSS на критичный (используемый для отрисовки первого экрана) и.. остальной. И это правильно с точки зрения ускорения загрузки сайта.
Некоторые web-мастера идут дальше и разделяют отдельно CSS для мобильной и десктопной версии, что уже само по себе не совсем корректно, так как должен быть единый адаптив и как минимум планшетная версия.
И указывают загружать тот или иной CSS в зависимости от устройства пользователя. Выглядит на первый взгляд не так уж и плохо. Но есть большое НО, а точнее большое CACHE!!!
Минифицировать и кэшировать CSS нужно!
Многие плагины (модули) для CMS умеют минифицировать (сжимать текст) и кэшировать CSS — и это и круто и полезно!
НО большинство из них не различает устройство пользователя (десктоп, планшет, телефон). И поэтому посетителю с десктопа может показываться кэшированный CSS для мобильной версии.
Столкнулся с эти совсем недавно на одном проекте и пришлось дублировать новые правила в двух файлах — браться за создание общего адаптивного CSS пока не стал, задача была минимум (30 минут работы, но целый час поиска проблемы), но клиенту об этом рассказал.
Теперь правильное решение для создания CSS на сайте
Создаем 2 файла (исключение WP, когда у вас есть дочерняя тема, файлов будет 3):
- style.css — куда пишем основные стили для всего сайта (старайтесь и на разных типовых страницах использовать одинаковые стили с другими, если конечно нет задачи создать совершенно другую по стилю страницу)
- responsive.css — сюда записываем все изменения для отображения по разрешениям (все @media)
Вот и все. Так вам (и тем кто будет после вас, а они, поверьте, будут) будет удобно искать и обновлять стили для блоков сайта и вообщем и в адаптиве.
Если эта информация оказалась вам полезной и интересной, то можно поблагодарить автора любой суммой либо по номеру телефона +79807480224 (Сбер, Тинькофф)
Еще больше интересной и полезной информации о SEO, сайтостроении, интернет-маркетинге читайте на моем канале 
@freelancervit.
