Недавно я начал работать с LessCSS, и у меня был довольно большой успех в отношении того, насколько чистым и читаемым стал мой CSS. Тем не менее, я не думаю, что я использую Less в полной мере.
Сейчас я занимаюсь кодированием своего первого полностью отзывчивого сайта с использованием Менее, а меня интересуют производительность и скорость. Одно дело отметить, что я не придерживаюсь методологии "контрольной точки" - я масштабирую вещи вверх и вниз, пока они не сломаются, затем я пишу CSS, чтобы исправить их; который обычно приводит в любом случае от 20 до 100 медиа-запросов.
Я хотел бы начать использовать Less, чтобы вставить медиа-запросы внутри моих элементов, например, пример ниже:
.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.
Обновление 2 и полу-решение: Я нашел эту статью, в которой обсуждаются четыре основные категории селекторов CSS и их эффективность. Я настоятельно рекомендую прочитать, что помогло мне разобраться, как лучше всего справляться с моим CSS-методом с использованием медиа-запросов.
Итак, мой вопрос таков: после того, как DOM готов, будет ли это много запросов к мультимедиа в моей скомпилированной таблице стилей влиять на время загрузки и производительность?
