Правильно ли я делаю?

Question

[tosster22]

Здравствуйте. Раньше при верстке я делал так. Было два файла. Один для стилей, второй для медиа запросов. Медиа запросы я добавлял к обычному файлу со стилями в конце файла и сжимал через gulp.

Кода стало больше 1000 строк в одном проекте и поэтому стал искать более удобные способы верстки.

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

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

Подскажите, как лучше верстать проекты. Может быть вы посоветуете другие подходы в разработке

Comments

[Сергей delphinpro]

Правильно. Так и нужно делать.

[Сергей delphinpro]

При желании можно в сборке использовать что-то типа gulp-combine-mq, это может слегка уменьшить размер выходного файла.

[tosster22]

Сергей delphinpro, как второй способ? а не будет дублированием кода то, что я в каждый файл запросы для адаптивности?

[Сергей delphinpro]

tosster22, Да, второй.
Будет, но несущественно. На крайняк это https://www.npmjs.com/package/gulp-combine-mq может собрать и объединить вам все медиа-запросе в билде.

[Дмитрий]

tosster22, это нормально. Вы же в каждом файле описываете определенный компонент или блок и для него пишете свои медиа-запросы. По мне - так логично.

[Lord_Dantes]

Что вам мешает в файле где вы все импортируете поставить один запрос и в этот запрос импортить файлы под ваши медиа. Как пример могу приложить шаблон который я использую.https://github.com/lord-dantes/pug-scss-start_v2.0

[Rustam Bainazarov]

tosster22, я в файле компонента (SASS) пишу media-запросы. Но не в конце, а после каждого элемента компонента, т. к. использую BEM и конструкцию типа @at-root #{$self}__el {...}.

Потом media-запросы объединяю с помощью какого-то там плагина для Gulp.

[alex-1917]

для каждого блока конечно же.
удобно разбирать свой же код.
удобно склеивать в два файла для гугла: первый экран + остальное.
все остальное пусть сборщики делают, они для этого и придуманы.

Answer 1

[Евгений Вольф]

Подскажите, как лучше верстать проекты. Может быть вы посоветуете другие подходы в разработке

Как лучше - зависит от конкретного случая, но, когда я занимался вёрсткой это выглядело примерно так:
0. Используем препроцессор, какой-нибудь, например SASS (SCSS)
1. Благодаря препроцессору, среди прочего - Вы можете дробить файлы стилей на сколь угодное число оных (хотя, я бы так делать не стал)
2. CSS (при нашем подходе) мог делиться на следующие части:

• Файл с основными (базовыми) стилями (в отдельных случаях он может быть включён в inline-виде прямо в заголовок страницы)
  
• Файл с дополнительными стилями
  
• Файл с общими медиа-запросами (по необходимости)
  
• Файлы с медиа-запросами на каждое разрешение (каждый файл грузится в зависимости от разрешения устройства)
  
• Файл с темой (если таковые есть)
  

Касательно файлов с медиа-запросами, в общей сложности выглядит это примерно так: сначала делается вёрстка в базовом разрешении (либо "мобильная", либо "десктопная"), а потом пишутся общие стили для адаптации оной, действительные для всех разрешений, потом пишется "слой корректировок" под каждое отдельно взятое разрешение (по необходимости).

*Выше озвучен исключительно наш подход к работе, выработанный нами и для наших проектов, далеко не факт, что подобный подход подойдёт Вам.

Так же, рекомендую ознакомиться со списком методологий (от себя к этому списку хочу добавить то, что подход "гадить в HTML-код, создавая при этом элементы без которых легко можно обойтись" - нарушает основополагающие рекомендации CSS-основоположников, по этому, в большинстве случаев, методологии пропагандирующие подобный подход нами даже не рассматриваются).

Comments

[Евгений Вольф]

гораздо лучше когда они изолированы друг от друга и КАЖДЫЙ элемент имеет свои правила адаптации под экраны.

BD_ l3ftoverZ!, честно признаться, я затрудняюсь себе представить, как может выглядеть реализация в которой НЕ КАЖДЫЙ элемент правила адаптации... а чем оно лучше?

[Евгений Вольф]

BD_ l3ftoverZ!, мы пробовали и так и сяк и эдак... в итоге в ряде случаев остановились именно на том варианте, который я описывал выше. Безусловно у нас есть ряд особенностей конкретики именно нашей работы, которые сильно повлияли на подобное решение... но, описывать все тонкости и подробности я бы не смог физически, по этому, просто описал автору вопрос - один из возможных вариантов, не претендуя на звание "лучшего" или решение уровня "панацея".