1-3)
@media (max-width: 500px) {} - все
4)
Устройство в 320 рх подходит под все три запроса?
да
как CSS разбирает из этих запросов что применять?
применится правило, которое ниже в коде. Как если бы не было никакого медиа, а был обычный css.
4)
Или нужно ставить медиа стили строго в порядке убывания разрешения, чтобы самый нижний в коде был с наименьшим разрешением?
Если верстаешь сначала для монитора, потом для мобилок адаптируешь, то с наименьшим будет снизу, т.к ему надо перекрывать правила больших расрешений.
Если mobile first, то стили для телефона без медиа, а под большие разрешения ниже пишешь медиа запросы.
5) если стиль не меняется никогда (цвет например), медиазапрос для него не нужен.
6) Не удобно искать стили в разных местах.
хорошо, если один класс встречается 1 раз в css. Так лучше для поддержки кода
sass позволяет писать медиа внутри правила
.elem {
color: red;
@media () {
color: red;
}
}
7) это вопрос удобства. Главное не смешивай 2 этих случая.
