Есть ли преимущество в объединении css-медиа-запросов вместе?

(на это, возможно, уже был дан ответ - не удалось найти ответ, хотя)

Традиционное переопределение запроса @media имеет тенденцию группировать все переопределения для одного размера/среды в той же группе элементов.

например.

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

В Sass есть отличный способ написать переопределения запросов @media внутри вложенного объявления, например:

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

теперь, когда скомпилировано, sass не группирует блоки запросов @media вместе, поэтому вывод заканчивается примерно следующим образом:

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
}
@media screen and (max-width: 320px) {
  .biography {
    font-size: 1.5em;
  }
}

Я использовал эту технику для недавнего проекта, и когда вы применяете этот принцип к гораздо более крупному проекту, вы получаете несколько разделов запросов @media, распространяемых по всему вашему css (у меня сейчас около 20).

Мне очень нравится техника sass, так как она упрощает отслеживание потока переопределений (а также упрощает перемещение).

Тем не менее, мне интересно, есть ли недостаток в том, что в CSS есть несколько разделов @media, особенно с точки зрения производительности?

Я пробовал профайлер chrome css, но я не мог видеть ничего конкретного для запросов @media.

(Дополнительная информация о @media в sass на этой странице)