Лучше использовать несколько таблиц стилей мультимедиа или одну таблицу стилей с несколькими медиазапросами

Question

Использование внешней сетки CSS полезно, но время загрузки является интенсивным, особенно с медиа-запросами точек останова. Каковы плюсы и минусы в загрузке нескольких таблиц стилей, 1 основной с общей компоновкой сетки CSS, а затем других таблиц стилей для размещения точек останова медиазапроса для этой компоновки сетки CSS?
Если это хорошая идея, то это может быть следующим новым стандартом для оптимизированной загрузки CSS.

Множественные медиа-запросы стилей

Примеры:

Вот нормальный пример таблицы стилей макета сетки
Плюсы: работает отлично и надежно, все css в одном месте
Минусы: имеет очень большой размер файла, загроможденный массивными медиазапросами

<link href="style.css" rel="stylesheet">

.col-md-6 {
    width: 50%;
}

@media all and (max-width: 768px) {
    .col-md-6 {
        width: 100%;
    }
}

Вот пример нескольких таблиц стилей на основе медиа-запросов
Плюсы: секционирует код, деклаттеры, может сократить время загрузки в соответствии с документацией Google.Минусы: не уверен, что они честные, возможно, поддержка браузера, но это то, что мне нужно, чтобы выяснить,

<link href="style.css" rel="stylesheet">

.col-md-6 {
    width: 100%;
}

<link href="style-768.css" rel="stylesheet" media="all and (max-width: 768px)">

.col-md-6 {
    width: 100%;
}

Из того, что я могу сказать здесь на Googles Developer docs, таблица стилей, которая загружается только при необходимости (то есть с максимальной шириной: 768 пикселей), рассматривается только как "блокировка рендеринга", если она используется. Когда он не используется, тогда вся эта таблица стилей может быть пропущена и значительно снизить начальную загрузку CSS, необходимую в то время.

Это хорошая практика? кажется, что сокращение 2/3 системы грид-систем css путем перемещения блоков медиазапросов имеет серьезные преимущества, но, возможно, это отменяется тем, что DOM необходимо получить более одного CSS-документа?