Где принято писать media-запросы при работе с SASS?

Question

[photosho]

Где принято писать media-запросы (для адаптации) при работе с SASS - внутри описания стилей класса или в конце файла (отдельный блок для каждого запроса)? Какие проблемы могут возникнуть при использовании каждого варианта?

Answer 1

[Сергей delphinpro]

Староверы пишут в отдельном файле.
Потому что они так привыкли со времен, когда препроцессоров не было.
Или потому что не знают об автоматическом комбинировании запросов при сборке, боясь раздувания кода.

Нормально – это верстать максимально независимыми блоками, а отсюда следует единственный правильный вывод – стилевое описание блока должно быть целиком в одном месте.

Comments

[photosho]

Если, например, рассматривать БЭМ, то там для каждого блока принято заводить отдельный файл со стилями. Стили media пишутся для всего блока или внутри описания каждого элемента?

1 вариант:

.block {
  ...

  @media {}

  &__element-1 {
    ...

    @media{}
  }
}

2 вариант:

.block {
  ...
  
  @_element-1 {
    ...
  }
  
  @media {
    ...
    
    &__element-1 {
      ...
    }
  }
}

[photosho]

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

[Сергей delphinpro]

photosho, я предпочитаю второй вариант, но иногда и первый, если вот только для одно элемента нужно задать медиазапрос

[photosho]

Сергей delphinpro спасибо.

[Сергей delphinpro]

Александр, независимые блоки часто ассоциируют с БЭМ, но это не совсем так. Независимые блоки можно верстать и без БЭМа.

Сброс/нормализация с моей точки зрения не противоречит идеям независимых блоков. Просто вы под независимостью почему-то понимаете возможность взять блок из одного проекта и воткнуть его в совершенно другой. Я независимость рассматриваю как возможность воткнуть блок в любое место любой страницы в пределах данного проекта.

[photosho]

Александр это ничего не меняет. Как ответили выше, смотря что подразумевать под словом "независимость". Независимость блоков друг от друга не страдает от общего сброса - это просто приведение страницы к общему виду для всех браузеров. Учитывая это расхождения в браузерах, можно считать общий сброс глобальным механизмом, выходящим за пределы БЭМ: сначала вид страницы сбрасывается, и потом уже в проект включается БЭМ.