Для себя я разработал такую стратегию работы:
1) Договариваемся с дизайнером конкретно в этом случае по отступам.(Мы должны знать что и на каких устройствах как отображается. И это не только про медиа запросы.
2) Я использую БЭМ, тк как тоже уже вывел свой стандарт и есть много наработок, которые позволяют быстро их использовать. Мне достаточно удобно читать.
3) По поводу медиа запросов, отступов и прочее. Пример будет на CSS, в своей работе я использую SASS и что-бы привести код как к примеру ниже, приходилось много танцевать с бубном.
/* Определяем базовые отступы.*/
:root{
--main-padding:10px;
}
/* Если нам нужно изменить отступ от медиа запроса для всех элементов. */
@media screen and (max-width:1600px){
:root{
--main-padding:20px;
}
}
/* Если нам нужно будет в конкретном элементе изменить отступ под определённый медиа.*/
@media screen and (max-width:1600px){
.unique{
--main-padding:23.3px;
}
}
Работает это так. Переменные наследуются всем дочерним элементам. Тк же тут есть переопределение. Что позволяет быстро и удобно редактировать то что надо.
Тк же переменные могут хранить значение других переменных.
Обычно в root я храню все базовые дефолтные значение.
Потом в конкретных элементах я создаю свою переменную, в которой я ссылаюсь на корневую.