Кто использует такой подход в написании CSS?

Привет, друзья.

Давно перешел к компонентному подходу, когда каждый блок находится в своей папке (pug, scss, js, json).
Страшно даже представить, когда писал весь код в одном файле (ну ладно, почти в одном, за исключением миксинов, файла с медиа и еще парочку, но всё равно была жесть), сейчас, когда проекты большие и css превращается огромные файлы, это было бы просто нереально.
Но всё же, когда блок большой, даже с помощью препроцессора он может с легкостью разрастись на более 150 - 200 строк, что тоже начинает немного раздражать, т.к. когда хочешь посмотреть, что там написал для экрана < 768px, то приходится скролить вниз, потом опять наверх, потом опять вниз. Да, файлы конечно не настолько большие, но все же хочется и это свести к минимуму.

Т.е. раньше был такой подход:

.container {
   background: aqua;

   &__item {
      display: block;
      &_active {
         color: #000;
      }
   }

}

@media (max-width: 767px) {
   .container {
      background: chocolate;

      &__item {
         display: inline-block;
         &_active {
            color: #fff;
         }
      }
   }

}

Сегодня же пришел на ум другой способ, как мне показалось, более удобный: медиа выражение стоит прям в исходном блоке, что позволяет сразу увидеть, что и где с данным блоком происходит, а не искать где-то ниже/выше.
Сборщик все делает как надо: медиа выражения группирует и помещает в конец - в общем, ни ничем не отличается от обычного (или популярного) написания.
Редактор при выделении нужно медиа подсвечивает везде, где оно встречается, что не напрягает в выискивании нужного разрешения.
Т.к. разработка компонентная, то позволяет использовать какие-то блоки в других проектах, и такое написание очень удобно тем, что если нужно взять только часть, то не нужно бегать по файлу и искать все, что относится к определенному блоку, элементу, модификатору.

Поход вот такой:

.container {
   background: aqua;
   @media (max-width: 767px) {
      background: chocolate;
   }

   &__item {
      display: block;
      @media (max-width: 767px) {
         display: inline-block;
      }

      &_active {
         color: #000;
         @media (max-width: 767px) {
            color: #fff;
         }
      }
   }

}

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

Как Вам такой подход, имеет право на существование?
Более чем уверен, что не открыл ничего нового, поэтому возможно кто-то уже использует такой подход, если да, то как Вам?