0

Хотел бы получить Ваш совет по следующему вопросу - где именно вы размещаете медиа-запросы при верстке сайта и какой метод является более правильным (или современным)?
1 вариант - размещение стилей в отдельном файле (например media.css), что на мой взгляд удобно с точки зрения удобочитаемости кода, всегда знаешь, что адаптив в отдельном файле + все стили разбиты под разрешения
2 вариант (который мне рекомендовали на курсах верстки) - использовать миксин и расставлять медиа-запросы непосредственно внутри стиля тега, что тоже удобно т.к. запрос только к 1 файлу css, но это влечет увеличение кода и затрудняет оперативное внесение правок.
Если что, во втором варианте я имел ввиду что-то такое:

p {
  font-size: 16px;

  @media #{$tablet} {
    font-size: 18px;
  }

  @media #{$desktop} {
    font-size: 20px;
  }
}

Есть еще и 3 вариант - разбиение всех блоков на отдельные файлы html и css при использовании сборщиков (или инклудить), в таком случае наличие медиа-запросов внутри стилей тега не слишком увеличивают код, но т.к. в моем случае сайты часто правятся уже на сервере, то смысл сборщиков пропадает, да и инклуд файлов не приветствуется на скок знаю.

2
  • Нужно отказываться от правки прямо на сервере, немедленно. Это намного более серьёзная проблема, чем выбор места для хранения адаптива
    – andreymal
    23 мая 2018 в 16:12
  • У меня в компании даже Git-ом не пользуются, а о препроцессорах так вообще не знают, так что правки на сервере не единственная проблема)
    – TemTik
    24 мая 2018 в 11:27

4 ответа 4

0

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

2
  • Не является ответом на вопрос. Чтобы оставить свои замечания или попросить у автора внести уточнения, оставьте комментарий к соответствующему сообщению. - Из очереди проверок 24 мая 2018 в 5:24
  • Чего это не является? Спрашивали совета - вот я и советую ситуативное комбинирование вариантов 1 и 2. 24 мая 2018 в 9:48
0

В идеале, как по мне, нужно следовать методологии БЭМ и разбивать все блоки в отдельные файлы и там же писать медиа, они будут достаточно компактными. Но это требует понимания и определенной организации и далеко не во всех проектах это необходимо.

Лично я в большинстве случаев на данный момент использую отдельный файлы для медиа, с использованием современных технологий и приемов он получается так же достаточно компактным. Главное комментировать определенный блоки кода и тогда поиск нужного стиля будет достаточно простым и быстрым

Про запросы внутри стиля я так понимаю вы имели ввиду препроцессоры, это тоже имеет место быть, так как на выходе вы будете собирать уже боевой код и все эти медиа при помощи тех же сборщиков можно объединить. Главное чтобы вы сами быстро ориентировались в своей сборке.

Если ориентироваться на командную работу, лучше почитайте про БЭМ. Да и вообще очень много удобств для поддержки существующего проекта и работы над новыми.

0

Если бы вы использовали "сборщик/таск-менеджер", как, например, Gulp, то у вас бы не особо возникали такие вопросы. Лично я пишу медиа-запросы в той секции, к которой они относятся, а такой пакет, как group-css-media-queries, объединяет их из всех рабочих файлов, с распределением/группировкой под разные условия. Поэтому на вопрос о современности, я бы сказал, что это Webpack, Gulp и т.д. А будете ли вы писать в одном файле, разбивать на несколько, использовать ли миксины и прочее - это уже должно зависеть только от ваших личных предпочтений.

0

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.