Как реализовать принцип Mobile First?

Question

[kagri]

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

Comments

[Ярослав Иванов]

Никак. Делайте так как считаете удобныйм. Я считаю что desktop first.

[account-6]

Ярослав Иванов: неа, desktop first намного сложнее передедывать в mobile, чем наоборот.

[Ярослав Иванов]

account-6: кто сказал такую чушь ?

[account-6]

Ярослав Иванов: я сказал. Чушь это desktop first в эру смартфонов.

[Ярослав Иванов]

account-6: Обоснование ?

Answer 1

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

.elem {
 @media (max-width: 551px) {
    ...
    }
 @media (max-width: 991px) {
    ...
    }
    @media (max-width: 1200px) {
    ...
    }
}

это scss
1 класс 1 раз встречается только в стилях
так гораздо удобнее для поддержки
чем искать по разным файлам десктоп потом адаптив одного и того же элемента

Answer 2

[hufawoso]

Зависит от количества отличий. Если их много, то делать разные файлы. Если не много, то все в одном.

Answer 3

[sim3x]

Если используется просто цсс, то используется гульп / грюнт = нет разницы сколько файлов
По-хорошему используется фреймворк типа бутстрапа = там сасс / лесс = все также собирается в один файл

Хочешь разделять на файлы по своей логике - разделяй.
На продакшене - 1 файл, если файл больше 512кб, то 2-3