Меньше, медиа-запросы и производительность

Я недавно начал работать с LessCSS, и у меня был довольно большой успех в отношении того, насколько чистым и читаемым стал мой CSS. Однако я не думаю, что использую меньшее в полной мере.

Я сейчас в процессе кодирования моего первого полностью отзывчивого сайта, используя меньше, и я обеспокоен производительностью и скоростью. Следует отметить, что я не придерживаюсь методологии "точки останова" - я масштабирую вещи вверх и вниз, пока они не сломаются, а затем пишу CSS, чтобы исправить их; что обычно приводит в любом месте от 20 до 100 медиа-запросов.

Я хотел бы начать использовать меньше, чтобы вложить медиа-запросы в мои элементы, такие как пример ниже:

.class-one {

    //styles here



    @media (max-width: 768px) {

        //styles for this width

    }

}

.class-two {

    //styles here



    @media (max-width: 768px) {

        //styles for this width

    }

}

В ходе моего первоначального тестирования я обнаружил, что при просмотре скомпилированного вывода CSS-эта методология приводит к множественным (многим!) экземпляры @media (max-width: ___px). Я прочесал интернет, и не нашел ничего, что бы явно объясняло влияние вложенности/пузырчатости на производительность запросы СМИ.

Обновление 1: я понимаю, что больше CSS-информации приводит к большему CSS-файлу для загрузки , но я не так беспокоюсь о времени загрузки сайта, как о единственной метрике. Меня больше интересует, как браузер обрабатывает память и производительность после того, как DOM готов.

Update 2 & Semi-Solution: я нашел эту статью, в которой обсуждаются четыре основные категории CSS-селекторов и их эффективность. Я очень рекомендую чтение, которое помогло мне сортировать о том, как лучше всего справиться с моим над-медиа-запросом CSS.

Итак, мой вопрос таков: после того, как DOM будет готов, повлияет ли это количество запросов мультимедиа в моей скомпилированной таблице стилей на время загрузки и производительность?