Повторение одинаковых media запросов вредно?

Question

[creatoroftheworld]

Странный, наверно, вопрос. Есть код, на протяжении которого часто повторяются (раз по 20) одни и те же медиа-запросы.

@media (max-width: 1170px) {
	/*....*/
}

/*.....*/

@media (max-width: 1170px) {
	/*....*/
}

1. Считается ли это плохим тоном?

2. Создают ли эти повторения какие-либо осложнения при рендеринге/где-то там на низком уровне?

3. Вредно ли для мобилок большое кол-во media, которые мобилку вообще не касаются (media (min-width 1400px)?

Возможно ли на практическом примере ощутить вред и с какого момента он становится ощутим.

Answer 1

[Алексей Струков]

А почему они повторяются?
Там есть много компонентов и у каждого свои медиазапросы?
Если да - то это нормально.
Если же в одном компоненте дублируется код, то можно и почистить, объединив все вместе.
В любом случае, на производительность это практически не повлияет, тем более если их всего 20 а не 20000.

Answer 2

[Максим Тимофеев]

Считается ли это плохим тоном?

Да, как и все остальное, что усложняет работу с кодом

Создают ли эти повторения какие-либо осложнения при рендеринге/где-то там на низком уровне

не должны, но там на низком уровне, каждый браузер работает по своему и обобщать тут не будет правильным.

Вредно ли для мобилок большое кол-во media

Вредно? Типа, взрывается ли от этого аккумулятор? Нет. Если речь о мобильном браузере, то в чем тут отличие от десктопного?

Возможно ли на практическом примере ощутить вред и с какого момента он становится ощутим.

Проведи эксперимент. Сделай 2 html страницы, к каждый свой css подключи и замеряй разницу. Потом расскажешь. Не думаю, что кто-то чем-то подобным уже занимался. Будет кстати интересно результаты посмотреть.

Comments

[creatoroftheworld]

Не очень знаю, как тестировать скорость рендеринга CSS. В девтулах хрома вроде отображается скорость скачивания, если не ошибаюсь.

[Aleksandr]

а нахера так вообще делать?)

[Максим Тимофеев]

Александр Котов: +1 Только для интереса и теста, других причин не вижу

[Максим Тимофеев]

creatoroftheworld:

как тестировать скорость

Есть панель разработчика в любом браузере

[darksladen]

Ребят, а скажите лучше как делать по другому? Я так тоже делаю, используя БЭМ и sass.. То есть получается блок, а в нем сразу же стили для его адаптива. А вы медиа запросы в отдельном файле пишите или как?

А для ТС, это очень просто решается минифицируя css. Юзайте gulp и не парьтесь, он все условия сжимает в одно на выходе!

[Сергей delphinpro]

darksladen: по-другому - никак не стоит. Хороший подход, правильный. Оптимизацией пусть комп занимается, у него мозги железные. Разные там плагины для минификации, группировки медиа и т.п.

[darksladen]

Сергей: Слушай а не подскажешь как лучше делать медиа запросы на sass? Использую метод отсюдыва https://habrahabr.ru/post/156645/ Но думаю, что не самые оптимальный вариант. Может лучше все же обычные запросы писать под конкретные поинты, где блок ломается? И не использовать переменные даже?

[Сергей delphinpro]

darksladen: Скажу так - зависит от того, сколько платят. Если бюджет позволяет, - не влом посидеть и каждый блочок оттестить. Если бюджет скромный, или сроки жмут, то вариант с предопределенными брикпойнтами самый оптимальный вариант.