@tosster22

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

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

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

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

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

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


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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы