How to include styles for the mobile version of the site?

Question

css

There is a site that is written for desktops, now you need to make it adaptive for mobile devices.

I do like this:

@media screen and (max-width: 800px) {
    * {
        display: block; /* просто проверка */
    }
}

My problem is that styles like this don't apply without !important. I understand that this happens because the styles I write with the media query do not "cover" the styles of the desktop version, but are displayed along with them.

I write styles with a media query in a file with styles for the desktop version of the site, and I understand that this is bad, but I don’t know how to do it otherwise. And the answers that I found to my question were 3-8 years old, so I thought that maybe something could change.

How to correctly include CSS styles for the mobile version of the site so that only styles for the mobile version are included without styles for the desktop version?

Answer 1

A smarter approach is mobile-first .
All media are written by min-width starting from the smallest.
It doesn't matter if you only have a desktop layout. Tighten up and count.
The share of mobile traffic is higher than desktop traffic.
If still desktop-first, then by max-width in reverse order, starting with a larger width.
The media themselves are written at the bottom of the css file unless you are blocking the files.
You may find it more convenient to write media directly below the selector.
Then, when building, it would be nice to run the file through a plugin that groups media conditions and puts them at the bottom of the file.
If you need !important, it's likely that the body is nesting too many selectors. And then write a simple selector or a selector with less weight.
Read about the specificity of selectors and/or simplify your code.
The rest is on a specific example.

Answer 2

There was somehow an idea to differentiate the inclusion of separate stylesheets for < 768px and the disconnection of desktop / tablet ones. I wonder if anyone has implemented this?