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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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