Есть ли преимущество в группировке медиа-запросов 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;
    }
}

В Сассе,есть действительно отличный способ написать переопределение запроса @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, так как она упрощает отслеживание потока переопределений (, а также упрощает перемещение объектов ).

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

Я пробовал профилировщик chrome css, но не увидел ничего особенного в запросах @media.

(Подробнее о @media в sass на этой странице)