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

Question

[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 и менее */
    }
  }

Хочу понять, какие преимущества есть у первого и второго варианта и какой из них более правильный.

Answer 1

[Владимир Проскурин]

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

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

Answer 2

[Алексей Николаев]

У второго варианта преимущество - группировка медиа-запросов по классам, а не смешивание всего в одну кашу.

Answer 3

[Сергей delphinpro]

Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

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

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

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

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

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

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

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

Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.

Comments

[SN7iNC]

Постоянное упоминание о "@media (max-width: 767px)" для каждого класса. А если будет еще media (max-width: 320px), media (max-width: 480px), media (max-width: 620px) и т.п. для этих же класов - то будет каша - это не удобное представление и структура кода (ИМХО).

[SN7iNC]

Согласен с тем что второй вариант как его представили - нарушает синтаксис и не будет работать

[Сергей delphinpro]

SN7iNC, А теперь представьте самый повседневный кейс: чуть-чуть переверстать шапку. Учесть все представления. Брикпойнтов - четыре-пять. Что удобнее, открыть файл и исправить всё в одном месте, или скакать туда-сюда в поисках нужных селекторов?

[Сергей delphinpro]

Бустрап в этом смысле весьма показательный пример. Точнее покупные темы на его основе. Как правило они продаются без исходников (почему-то!). В подавляющем большинстве из них медиазапросы свалены в кучу в конце стилей (плюс переопределение стандартных стилей, вместо использования возможностей препроцессора, что тоже добавляет геморра). Кастомизация превращается в адъ.

[altai2013]

Я извиняюсь, тут была моя ошибка: настолько привык работать с препроцессорами, что полностью забыл о нативном CSS и даже не упомянул, что использовался синтаксис LESS.

[Владимир Проскурин]

Автор не упоминает препроцессоры, в тегах тоже нет.

Ну логично, что автор спрашивает не какой способ будет работать, а какой удобнее. Из контекста понятно, что речь о препроцессорах.

Учесть все представления. Брикпойнтов - четыре-пять

Я в своем ответе указал, как не сделать кашу из кучей брекпойнтов, нужно просто юзать переменные или миксины.

Бустрап в этом смысле весьма показательный пример.

Да, только сам бутстрап использует второй способ.
https://github.com/twbs/bootstrap/blob/v4-dev/scss...
https://github.com/twbs/bootstrap/blob/v4-dev/scss...
и в других файлах. Везде отдельно вызываются миксины для медиазапросов внутри селекторов.

[Сергей delphinpro]

Vlad_IT, Логично. Но это предположения )) Хотя и верные.

Миксины и переменные при первом подходе не избавят вас от необходимости лазить по разным частям проекта, что исправить один блок.

Речь идёт о третьей версии, на которой на сегодняшний день свёрстано подавляющее большинство коммерческих шаблонов.

Answer 4

[Serj-One]

Второй удобней и в разработке и в поддержке.

Answer 5

[Ivan Bogatov]

У первого варианта преимущество - группировка классов по медиа-запросам (устройствам), а не смешивание всё в одну кашу.

Answer 6

[Максим Тимофеев]

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

Comments

[altai2013]

Спасибо за ответ, мне тоже второй вариант всегда казался удобнее в работе, но Bootstrap, например, использует первый. А почему первый предпочтительней, если второй имеет преимущество в виде удобства?

[Максим Тимофеев]

altai2013, наглядно, проще дебажить, проще контролировать наследование. А по поводу bootstrap - они используют сборщики и препроцессоры

[SN7iNC]

Никогда второй вариант не считал удобным при разработке. 4-5 условий для media и их дублирование для каждого класса (если нужно, при адаптации). Гораздо удобнее видеть одно условие media и что в нем твориться. (ИМХО)

[Максим Тимофеев]

SN7iNC, а если scss? Все предельно наглядно. Хотя как вариант можно в отдельный файл

[Владимир Проскурин]

Bootstrap, например, использует первый.

Bootstrap использует второй (первый вы видите в результате сборки). Вот например
https://github.com/twbs/bootstrap/blob/v4-dev/scss...
https://github.com/twbs/bootstrap/blob/v4-dev/scss...
можно встретить куча @include media-breakpoint-*

Answer 7

[SN7iNC]

.class-1{}
 .class-2{}

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

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

Для себя выбираю ПЕРВОЕ. (считаю это более грамотный подход, ибо "@media" может быть много - при нескольких условиях)

Answer 8

[Froggyweb]

Муторно как-то. Если препроцессоры я делаю так
.main
+tab()
Погнали, желательно mobile first
+desk()
....