Как в верстке вы оформляете правила с адаптивом?

Question

[v-orlov]

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

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

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

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

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

Comments

[Сергей delphinpro]

Конечно по компонентам. Так читать удобнее. А оптимизации оставьте на откуп сборщикам.

Answer 1

[Андрей Горохов]

Использую scss и media прописываю внутри тех блоков, для которых оно нужно. Так читая стили для определенных блоков я сразу понимаю как они себя ведут при изменении размеров экрана

.block {
  color: #fff;
  @media (max-width: 600px) {
    color: #369;
  }
}

Comments

[Aslan]

Разве не правильнее отдельный файл с запросами подключать?

[Андрей Горохов]

Правильней для чего именно?

[Aslan]

Андрей Горохов: медиа запросы держать в отдельном файле

Answer 2

[metaf]

.class {
  color: red;
  @media (min-width: 600px) {
    color: green;
  }
}

https://benfrain.com/inline-or-combined-media-quer...
https://sass-guidelin.es/ru/#section-59

Comments

[v-orlov]

спасибо за ссылки

Answer 3

[Андрей]

Делаете блок стилей с медиазапросами под конкретное разрешение, в нем от общего к частному правила - лейаут, шапка, футер, комментарии. И так 3-5 блоков медиазапросов будут идти

Answer 4

[VsWeb]

можно через правило
@import

Answer 5

[v-orlov]

окей, а если у меня sass с такой вложенностью

header {
  width: 500px;
  .block {
  background: #ccc;
  }
}

бонус от инлайн mq понятна, но если мне всю эту вложенность нужно изменить на 0-500px, не писать же так:

header {
  width: 500px;
  @media (max-width: 500px) {
    width: 100px;
  }
  .block {
  background: #ccc;
  @media (max-width: 500px) {
    background: green;
  }
  }
}

?

Comments

[metaf]

Почему же. У вас получится

header {
  width: 500px;
}
@media (max-width: 500px) {
  header {
    width: 100px;
  }
}
header .block {
  background: #ccc;
}
@media (max-width: 500px) {
  header .block {
    background: green;
  }
}

Можно еще круче!

header {
  width: 500px;
  @media (max-width: 500px) {
    width: 100px;
  }
  .block {
    background: #ccc;
    @media (max-width: 500px) {
      background: #000;
      @media (max-width: 900px) {
        background: green;
      }
    }
  }
}

Результат:

header {
  width: 500px;
}
@media (max-width: 500px) {
  header {
    width: 100px;
  }
}
header .block {
  background: #ccc;
}
@media (max-width: 500px) {
  header .block {
    background: #000;
  }
}
@media (max-width: 500px) and (max-width: 900px) {
  header .block {
    background: green;
  }
}