Is there a standard for Media Querie application?

Question

I’m starting to learn now about Media Querie and I have a doubt I haven’t seen the answer.

Is there any standard in the media querie application ?

It is correct to have a media-querie.css file with all modifications or the correct one would involve the whole code in blocks of media-queries, being that for example, the index.css file, would have inside it a block of media-querie in 360px, another block with 960px etc, both with all page css code.

Or is there yet another pattern ?

Thank you.

Answer 1

I will give you an answer based on what I do in my projects, in fact I do not specify a specific pattern of size in my media queries, what I do is to develop a layout as fluid as possible with the help of some CSS technologies (thanks flexbox)and in my tests, I use a responsiveness emulator, when the layout reaches a certain width and my layout breaks at that point, I insert a breakpoint at that width, Ex: I have a slider and in desktop size behaves normally showing 3 images, when the width is at 320px the slider "breaks" at 3 lines, enter a breakpoint @media all and (max-width: 320px){} and there I put the rules so that my slider is showing only one image at a time.

Answer 2

OOCSS

As far as I know, the OOCSS (Object-Oriented CSS) convention says it’s best to create a library with separate CSSS components.

Therefore, in an exemplary way, one should create a separate style sheet for each component of a project, such as buttons, navbar, Typography, etc...

Graphic example:

root
|
+-- index.html
|
+-- css/main.css; buttons.css; navbar.css; typography.css...
|
+-- js/

Fictitious situation with buttons

That way, if your need was to apply breakpoints (media queries) to buttons, you would create a Buttons.css file that would contain the rules for the various sizes of buttons.

What the style sheet of a button component would look like:

.btn {
    width: x;
}

    @media only screen and (max-width: 682px;){
        .btn-y {
            width: y;
        }
    }

    @media only screen and (max-width: 960px;){
        .btn-z {
            width: z;
        }
    }

Completion

Modulate your CSS so that each component has its own CSS. So within each style sheet use the breakpoints for the given component.

Still about style sheets, notice that I talked about OOCSS in a shallow way, so I recommend that you research on the subject.

Also, do not take into account the comment of those who speak to use Bootstrap, after all, has no relation to your doubt.

Ps: I have difficulty expressing myself. So, if you still have doubt, comments.

Edit 1: This situation, which I mentioned, applies only at the development stage. Therefore, you would have to use something like preprocessors to combine everything, when finishing the development.

Edit 2: @hugocsl brought this link which explains how to behave, when publishing.