Нормален ли такой подход к верстке с SCSS по БЭМ?

Question

[Raym0NT]

Добрый день,нормально ли делить scss на отдельные блоки,как в BEM,и писать media запросы под каждый блок,после все это подгружать в один css файл?
И также есть и какое-либо ограничение в использование media?

Блок

Основного scss файл


Нормальна ли вообще такая структура файлов?

Answer 1

[Сергей delphinpro]

Так и делают. Только блоки медиа располагают внутри селектора.

.hero {
  &__title {}

  @media (min-width: 1000px) {
    color: red;
    &__title {}
  }
}

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

Comments

[Raym0NT]

Тоесть,то что будет много повторяющихся media запросов в css файле тоже нормально?
К примеру в одном блоке есть media запрос на 1000px и в других блоках media на 1000px,это не как не влияет на оптимизацию и т.д?

[Сергей delphinpro]

Raym0NT, Это увеличивает выходной файл, но упрощает поддержку.
Первое компенсируется использованием плагинов сборки по типу combine-media-queries. Они после компиляции объединяют одинаковые медиа-запросы в один блок. Разумеется, располагают их в правильном порядке. И в конце файла.

[Raym0NT]

Сергей delphinpro, Понял благодарю!

Answer 2

[Лев Александров]

Я раньше так делал, потом надоело каждый раз создавать файл, переходить из одного в другой и создавать файл для каждого малюсенького блок. Все это замедляло работу. Теперь снова пишу все в одном scss файле.

Comments

[godsplan]

можно настроить автоимпорт созданных файлов в главный файл

[Лев Александров]

godsplane, как?)