Зачем верстать вначале мобилку?

Question

[Василий Хрягин]

В чем плюсы такого подхода к верстке?

Comments

[Алекс Глебов]

целая книга на эту тему есть
https://www.livelib.ru/book/1000531578-snachala-mo...

Answer 1

[profesor08]

В чем плюсы такого подхода к верстке?

Плюсов нет. Это палка о двух концах, либо стили переопределяются в одном порядке, либо в другом. На выходе будем иметь следующее: при mobile first на мобилках будет минимум переопределений, на десктопе - максимум. При desktop first на оборот. Это влияет только на скорость первичного рендера элемента.

Если же хочется настоящей оптимизации, то не должно быть переопределений стилей. Это значит надо писать часть стилей, которые постоянные как обычно. Стили которые меняются, писать только для определенных брейкпоинтов, и делать это по умному, чтоб ничего не переопределялось.
При таком подходе не будет иметь никакого значения для какой платформы ты в первую очередь пишешь код. Все будет одинаково оптимизировано.

Comments

[Василий Хрягин]

то есть чем меньше задействовано css-стилей на элементе тем быстрее подгружает сайт?

[profesor08]

Василий Хрягин, откуда этот вывод? Элементу надо указывать столько стилей, сколько ему нужно. Помимо этого следить, чтоб стили не переопределялись чтоб избежать лишних перерисовок.

[Василий Хрягин]

profesor08, что значит не переопределялись?

[profesor08]

Василий Хрягин, посмотри в devtools и поймешь

Answer 2

[Сергей delphinpro]

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

Answer 3

[Lord_Dantes]

Зачем верстать вначале мобилку?

Не зачем.

В чем плюсы такого подхода к верстке?

Ни в чем. Даже сравнений нету, вот буквально ни с чем.

Answer 4

[Alex]

Вы делаете один файл со стилями main-styles.css. В нем вся верстка сайта как для мобилок.
Отдельно делаете файл desktop-styles.css в котором переопределяете главные стили чтобы адаптировать верстку под широкие экраны. Затем сервер для мобильных отдаёт только один файл, а для десктопов — два. Десктоп загружает больше трафика, но на нем как правило и скорость сети выше.
Как то так.