@altai2013

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

Подскажите, какой вариант более правильный для оформления медиазапросов и почему?
1) медиа запрос с классами внутри, например:
@media (max-width: 767px) {
  .class-1 {
	/* стили для экранов 767px и менее */
  }
  .class-2 {
	/* стили для экранов 767px и менее */
  }
}

2) класс с медиа запросами внутри, например:
.class-1 {
    /* основные стили */
    @media (max-width: 767px) {
	/* стили для экранов 767px и менее */
    }
  }

  .class-2 {
    /* основные стили */
    @media (max-width: 767px) {
	/* стили для экранов 767px и менее */
    }
  }


Хочу понять, какие преимущества есть у первого и второго варианта и какой из них более правильный.
  • Вопрос задан
  • 2525 просмотров
Решения вопроса 4
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Если предполагается, что никто после вас не будет редактировать выходной CSS, и весь проект будет собираться сборщиком, то второй вариант удобнее, т.к. получается удобный компонентный подход.
Допустим, есть компонент "кнопка", и для него отдельный файл /blocks/button.scss, очень удобно писать стили для этой кнопки только в этом файле. И если соблюдать БЭМ, если создавать переменные, то позже, этот компонент (блок) можно будет использовать в других проектах, без дополнительного редактирования. Скопировал файл, поменял переменные (для оформления, цвет, отступы, размеры, шрифт и.т.д.), подключил и готово.
Но одно замечание, лучше сразу определите миксины (или переменные) для этих медиа запросов, чтобы не было сотни разных медиазапросов аля 300px, 320px, 400px и.т.д. Можно позаимствовать из Bootstrap 4

Первого варианта придерживаюсь при написании стилей на чистом css и без сборщиков, т.к. легче писать последовательно для разных устройств. Но такое случается редко, только если поддерживать старый проект.
Ответ написан
Комментировать
У второго варианта преимущество - группировка медиа-запросов по классам, а не смешивание всего в одну кашу.
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

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

/*== Какой-то блок на странице */
.class-1 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-1 {
    /* стили для экранов 767px и менее */
  }
}

/*== Какой-то другой блок на странице */
.class-2 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-2 {
    /* стили для экранов 767px и менее */
  }
}

/*== И так далее… */
…


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

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

Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.
Ответ написан
Serj-One
@Serj-One
i'm sexy and i know it
Второй удобней и в разработке и в поддержке.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
Malekith
@Malekith
У первого варианта преимущество - группировка классов по медиа-запросам (устройствам), а не смешивание всё в одну кашу.
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Первый вариант предпочтительней. Второй вариант удобнее при разработке. Выход - юзайте сборщики и препроцессоры, которые за Вас приводят css к нужному виду. Пишите во втором варианте, получаете на выходе первый.
Ответ написан
@sn7inc
.class-1{}
 .class-2{}

@media (max-width: 767px) {
  .class-1 { /* стили для экранов 767px и менее */  }
  .class-2 { /* стили для экранов 767px и менее */  }
}


Лучше определить для себя как удобнее:
1. Работать с "@media" и группой различных .class
2. Или Работать с каждым ".class" в различных "@media"

Для себя выбираю ПЕРВОЕ. (считаю это более грамотный подход, ибо "@media" может быть много - при нескольких условиях)
Ответ написан
Комментировать
@Froggyweb
Муторно как-то. Если препроцессоры я делаю так
.main
+tab()
Погнали, желательно mobile first
+desk()
....
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы