Is it the right approach to adaptive layout?

Question

css

Guys, I've been building responsive websites for a long time and then I asked myself a question.
I use this approach.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">

First, I make up a static page in style.css, then I customize it for all gadgets using media queries in responsive.css, and so on for each page.
How correct is this approach and are there more universal methods for creating an adaptive site?

Answer 1

You end up with a desktop-first approach, then you end up having to override all sorts of desktop styles on mobile phones.
The most convenient and readable organized code is when everything is in one file, and media are described inside the class

.class {
  //general & mobile styles
  color: red;
  @media (min-width: 600px) {
    //tablet & above styles
    color: green;
  }
  @media (min-width: 1200px) {
    //desktop styles
    color: black;
  }
}

Answer 2

That's how I use it.
Have fun with bootstrap. It might get easier. I'm not a fan of bootstrap myself.

Answer 3

I use sass in my work, I put the styles of each block in a separate file, where the main styles of the block are first described, and below are media queries. As mentioned above, it is more convenient to view and edit the behavior of the block in one place.
With regards to the layout process, it is different for everyone, some throw html on the entire page, and then do pure css for it. I practice this approach, I type from block to block. For example, I start with a header, add html and immediately all css and media for it, tested everywhere, checked, everything is chic, moved on to the next block. With this approach, you don't get in the way of other unstyled blocks, you only work on one part of the page and concentrate only on working with it. In addition, you immediately tested on all resolutions and do not return to this block again.

Answer 4

It is possible and so, of course.
But personally, I prefer styles that belong to the same entity to be together. So that you can see and immediately understand how she behaves.
And not to look and think - hmm, but I wonder what else for this block can be written in other files? And is it written? And if so, what, what and where?