Как правильно писать медиа запросы?

Question

[corasao]

Как лучше писать media запросы в css?
Чаще всего медиа запросы пишут в самом конце style.css или выносят в отдельный файл media.css, который подключают послу style.css.
Недавно увидел другой вариант написания. Когда медиа запросы пишут под каждой секцией (хедером, футером).
Мне этот вариант более удобный, у другой разработчик сможет быстрее разобраться в коде. Но вопрос не скажется ли это негативно для быстродействия сайта, браузера и т.д.?
Возможно, визуально будет проще понять суть моего вопроса.
https://monosnap.com/file/wj0QsoLr0tHHjBNfJM3SyiSX...

Comments

[Ankhena]

Как правильно писать медиа запросы

Удобнее внутри каждого селектора, используя препроцессор.

А вот в готовом css все media группируют и отправляют вниз файла.

Answer 1

[Сергей delphinpro]

https://qna.habr.com/q/889235
https://qna.habr.com/q/515932
https://qna.habr.com/q/440823
https://qna.habr.com/q/519851
https://qna.habr.com/q/458710

Answer 2

[Vladislav]

Если внизу файла, то да, это удобно редактировать на проде, но если проект лежит на гите и разбит на компоненты препроцессора, того же SCSS, проект проще поддерживать, если медиа лежат внизу каждого компонента, например шапки и если посмотреть с точки зрения оптимизации, то когда юзер заходит на сайт с телефона, если медиа в самом конце, то как мы знаем они читаются сверху вниз и пока читается пк стили той же шапки и пока они пройдут весь css до низа медиа, если проект большой это будет затратно и на доле секунд можешь увидеть на телефоне отсутствие адаптива той же шапки