Правильное использование media queries?

Question

[Alibek Kulseitov]

Давно верстаю методом mobile first. Но недавно все больше склоняюсь к desktop first.
Почему?

Какой из вариантов эффективен для меньшего веса css так как цель мобайл first это минимум строк кода css. Ваше мнение господа?

Вариант 1:

.navigation {
        display: none;

        @include media-breakpoint-up(lg) {
            display: flex;
			align-items: center;
			border-top: 1px solid #ccc;
            background-color: #353535;
        }
    }

Вариант 2:

.navigation {
		display: flex;
		align-items: center;
		border-top: 1px solid #ccc;
		background-color: #353535;

        @include media-breakpoint-down(md) {
			display: none;
        }
    }

Comments

[Rustam Bainazarov]

Я иду на понижение, т. е. адаптивность у меня это media-стили мобильных устройств. Не знаю, уменьшает ли это объём CSS, но это точно удобнее, чем изменение стилей в обратном порядке по типу media media (min-width: 1299px). Для меня, конечно же.

Опять же, всё зависит от проекта. У меня есть проект, в котором идёт как раз на повышение (mobile first), но это изначально ориентированное на телефоны и планшеты web-приложение, которое мы решили использовать и для десктопа.

[Сергей Горячев]

Подписываюсь под каждым словом SmthTo

Answer 1

[Andrey]

На своей практике пришел к выводу что все определяет конкретный дизайн. Далеко не всегда дизайнеры рисуют полноценный mobile first. Чем меньше кода и чем он проще - тем и лучше, помоему это главный критерий. Посмотрите как sass хелперы медиазапросов реализованы в том же 4м бутстрапе, они могут идти как от меньшего к большему, так и наоборот.
В примере выше вообще без разницы.

Answer 2

[Вазген Алексанян]

Поддерживаю Андрею. А еще добавлю что если хотите прям меньше кода - тогда одновременно нужно и mobile first и desktop first, потому что почти всегда весь макет не напишешь на одном из них. Будет блок где получиться меньше кода по desktop first а будет блок-наоборот. Я раз пробовал одновременно использовать обо, и перестал так делать, очень много заморочек из за каких то Кбайт.