Правильный ли подход к адаптивной вёрстке?

Question

[Роман Огарков]

Ребята, давно уже верстаю адаптивные сайты и тут задался вопросом.
Я пользуюсь таким подходом.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">

Сначала верстаю статичную страничку в style.css, потом подгоняю под все гаджеты с помощью media запросов в responsive.css и так каждую страничку.

Насколько этот подход правильный и есть ли более универсальные методы создания адаптивного сайта?

Comments

[Ankhena]

В одном файле часто удобнее разбираться, чем часть там, часть тут.

Answer 1

[metaf]

У вас получается desctop-first подход, намучаетесь потом перекрывать всякие десктопные стили на мобилках.
Наиболее удобно и читабельно организованный код - когда всё в одном файле, а media описаны внутри класса

.class {
  //general & mobile styles
  color: red;
  @media (min-width: 600px) {
    //tablet & above styles
    color: green;
  }
  @media (min-width: 1200px) {
    //desktop styles
    color: black;
  }
}

Comments

[Павел]

не совсем понял что за .class ?

[Ankhena]

mrusklon: просто любой селектор, какая разница

[Павел]

Ankhena: ну с точки чтения и правки кода , да это удобнее. Но ведь на каждый селектор так добавлять правила , это кода сколько будет....

[metaf]

mrusklon: Не на каждый селектор. При mobile-first подходе у вас в medua query будет в основном layout для бОльших экранов. А основные стили прописаны вне media-query (как подходящие под все разрешения). Да и вынося media в отдельный файл, вы так же дублируете селекторы (которые тут не дублируются), не так ли?

[metaf]

mrusklon: Вот, если вам интересно, еще сравнение веса файла https://benfrain.com/inline-or-combined-media-quer...

[Роман Огарков]

Хороший подход, рекомендую!

Answer 2

[Сергей ZSA]

Ну делать адаптив вам так никто не мешает и тут ничего такого вы особа и не описали. Есть 2 способа верстать адаптивно - сначала мобильную версию и из неё переходить в десктоп, либо обратно. Только так.

На счет того, как организовать процесс - изучите БЭМ для этого дела. С ним хорошо верстать. Если ещё пользоваться препроцессорами какими-то - шикарно, а ещё если и сборщиками - вообще идеально (ну less/sass/postcss можно по-разному компилить вплоть до плагинов в редакторе).

Как делаю я:
1. Клепаю html полностью, естественно именую классы по БЭМ (можно посекционно делать - сделал секцию шапки, запилил стили, сделал секцию подвала и опять же запилил стили, кому как удобно)
2. Создаю на каждый (ну или почти на каждый) БЭМ-блок свой .less файл.
3. В каждом файле верстаю сначала моб версию, потом в нём же чуть по-ниже пишу нужные media
4. Конечно же сборщиком всё собираю в 1 css файл и всё (сборщик работает, конечно, постоянно, чтоб компилировать из less в css ну и минимизировать сразу и автопрефиксить).

Этап 3 можно делать подругому, к примеру делать отдельно media.block.less под каждый блок и всё это загонять в самый низ сжатого css, либо весь media делать в отдельном файле просто, всё зависит от того, на сколько много вам нужно писать media (у меня бывают простые проекты, где media нужно буквально 2-3 штуки в 50-70 строк кода максимум, для этого не вижу смысла всё в отдельные файлы блоков писать, пихаю просто всё в один).

P.S. Конечно же отдельные файлы less для миксинов и переменных ну и основных стилей страницы.

P.P.S Если вы не знаете препроцессоров - можно всё тоже самое делать и в обычном css, всё равно будет удобно. Раньше я считал дикостью такой подход. Сейчас без него жить не могу.

Comments

[Роман Огарков]

Спасибо за доскональный ответ. Да, я использую препроцессор SASS (*.sass) с Framework Compass CSS. Также использую систему описания задач Gulp для сборки проекта. Есть опыт использования RequireJS Optimizer, Grunt и конечно же супер системы сборки JS WebPack. В связке с Gulp использую Browser Sync. А вот БЭМ я не знаю, наслышан много о нём, но не пробывал. Надо заюзать, хотя скорость вёрстки и так на высоте.

[Сергей ZSA]

Роман Огарков: попробуйте БЭМ и отдельные файлы для блоков. После первого же проекта (ну максимум второго) вы поймёте, на сколько легче стало работать)) Особенно актуально если есть типовые проекты.

[Роман Огарков]

Сергей ZSA: Хорошо, попробую. Если есть желание не могли бы скинуть ссылки на хорошие видеоуроки по БЭМ

[Сергей ZSA]

Роман Огарков: Тут и видео особа не надо. nicothin.github.io/idiomatic-pre-CSS

[Роман Огарков]

Сергей ZSA: Спасибо

[Роман Огарков]

Сергей ZSA: Офигеть, не зная БЭМ я его использовал. У меня за годы опыта сформировалась своя стратегия именования классов и "пространства имён". Почти тоже самое и в БЭМ

[Сергей ZSA]

Роман Огарков: Так у всех более менее профессиональных разработчиков)) Но лучше делать по БЭМ именно, потому что так будет понятно каждому, кто откроет ваш код.

[Роман Огарков]

Сергей ZSA: Да, точно.

Answer 3

[Александр Пупкин]

Я так и пользуюсь.

По балуйся с bootstrap. Может легче станет. Сам я не фанат bootstrap.

Answer 4

[Антон]

В работе использую sass, стили каждого блока выношу в отдельный файл, где сначала описывается основные стили блока, а ниже media queries. Как писали выше, удобней в одном месте смотреть и редактировать поведение блока.

Касаемо процесса верстки, у всех он разный, некоторые накидывают html на всю страницу, а потом занимаются чисто css для него. Я практикую такой подход, верстаю от блока к блоку. Например начинаю с шапки, накидал html и сразу же все css и media для нее, протестировал везде, проверил, все шик, перешел к следующему блоку. С таким подходом, вам не мешают другие не отстиленные блоки, вы работаете только с одной частью страницы и концентрируетесь только для работы с ней. В добавок вы сразу протестили на всех разрешениях и больше к этому блоку не возвращаетесь.

Answer 5

[dom1n1k]

Можно и так, конечно.
Но лично я предпочитаю, чтобы стили, относящиеся к одной сущности, были вместе. Чтобы можно было посмотреть и сразу понять как она себя ведет.
А не смотреть и думать - хм, а интересно, что ещё для этого блока может быть прописано в других файлах? И прописано ли? А если да, что что и где?