OOCSS

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

So, in an exemplary way, you 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

In this way, if your need were to apply breakpoints (media queries) to buttons, you would create a buttons.css file that would contain the rules for the various button sizes.

What would be the style sheet for a button component:

.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;
        }
    }

Conclusion

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

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

In addition, do not take into account the comment of those who talk to use Bootstrap, after all, has nothing to do with your doubt.

Ps: I have difficulty expressing myself. So if you still have questions, please comment.

Edit 1: This situation I mentioned applies only in the development phase. So you would have to use something like preprocessors to combine everything as you complete development.

Edit 2: @hugocsl brought this link that explains how behave at the time of publishing.

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