Mobile First или разделение стилей?

Question

[Giterman]

Здравствуйте!
Хотелось бы узнать у более опытных разработчиков, какой способ адаптивной верстки предпочтительнее использовать:

Mobile first

.text {
  font-size: 12px;
  color: #222;
}

@media (min-width: 768px) {
  .text {
    font-size: 14px;
  }
}

Вынесение различающихся стилей в соответствующие медиа-запросы

.text {
  color: #222;
}

@media (max-width: 767px) {
  .text {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .text {
    font-size: 14px;
  }
}

Заранее спасибо за ответ!

Answer 1

[Андрей Б.]

Mobile First

Answer 2

[hellcaster]

Суть в том, что мобильные устройства более слабые, чем компьютеры и когда вы делаете по медиа запросам, то телефону нужно сначала отобразить desktop версию, а потом ещё и медиа запроси. А когда вы делаете по принципу mobile first, то телефону нужно отобразить только одну страничку, без медиа запросов, а компьютеры с этим и так справляется

Comments

[Giterman]

Я немного другое имею ввиду (посмотрите на второй пример). Изначально пишутся только общие стили для всех разрешений, а затем все различающиеся в соответствующих медиа-запросах. Таким образом при большем разрешении экрана стили не перебиваются, а просто заменяются. В консоли нет грязи из кучи зачеркнутых свойств. При этом стили desktop версии не попадают в телефон.

[hellcaster]

Giterman, лучше mobile first так, как страница быстрее отобразится

Answer 3

[Александр Таратин]

Для font-size и многих других свойств можно применить
https://gist.github.com/indrekpaas/7f22e44ace49b5124eec
Остальное решит scss
https://habr.com/post/156645/ (только пример, для боевого использования можно подобрать готовые отполированные библиотеки миксинов)

Answer 4

[Александр Севиринов]

Mobile-first
Сначала пишите стили для мобильного устройства, как обычно без медиа-запросов
А уже для больших разрешений правите стили в медиа-запросах.

Comments

[Giterman]

А не смущают перебитые стили и грязь в консоли из-за кучи зачеркнутых свойств?

[Александр Севиринов]

Ну так это особенность медиа-запросов. Не обращайте внимания на это. Не нужные медиа-запросы не будут загружаться.

[Александр Севиринов]

Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:

1. Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model). DOM представляет документ в память компьютера и применяет к содержимому стили.
   
2. Браузер отображает содержимое DOM.