What is less time consuming in adaptation inheritance or lockdown?

Question

Layout

Good day) I just decided to ask)) I ask only for an adequate conversation.

The other day I was invited to the branch of the studio for help. So the designer in my branch draws all the resolutions 320 545 768 1024 1450 and above 1600. The default is 1920. In the layout, you have to write breakpoints and adjust all the elements to the design. (it's a little to the left, it doesn't look like it, etc.) I don't like this approach a lot of routine, but it turns out pretty. 100 hours per store.

In the branch, which opened recently (the processes have not yet been established), the designer does not bother and draws the appearance of the mobile and PC versions.
By the time in the branch, the pages are integrated and made up twice as fast, the result is a rubber site for 50-60 hours

. Question, how are you?
In many training videos, the design does not differ much from the PC version, except for the layout of the blocks and the burger menu.

I’ll add to the question that there will be effectively isolated blocks here (convenient for large breakpoints)
Block {
Styling
Element {}
}
Block 2 {
Styling
}
or matryoshka (like a block with inheritance and additions as in bam)
Class { style } class_red {mod}
class{ inheritance} class_black etc {modifier}

Answer 1

For myself, I developed the following work strategy:
1) We agree with the designer specifically in this case on the indents. (We need to know what is displayed and on what devices. And this is not only about media queries.
2) I use BEM, since I already brought his own standard and there are many developments that allow you to quickly use them. I'm comfortable enough to read.
3) About media queries, indents, and so on. The example will be on CSS, in my work I use SASS and in order to bring the code like the example below, I had to dance a lot with a tambourine.

/* Определяем базовые отступы.*/
: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;
}
}

It works like this. Variables are inherited by all child elements. There is also a redefinition here. That allows you to quickly and conveniently edit what you need.
Variables can also store the value of other variables.
Usually in root I store all the base default values.
Then, in specific elements, I create my own variable, in which I refer to the root.