How to format media queries correctly: media queries inside a class or classes inside a media query?

Question

css

Tell me which option is more correct for media queries and why?
1) media query with classes inside , for example:

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

2) a class with media queries inside , for example:

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

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

I want to understand what advantages the first and second options have and which one is more correct.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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