Css media queries

Question

which practice is the best for media queries in one file with some breakpoints or split some files for different breakpoints

e.g

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

or

<style>
@media screen and (max-width: 600px) {
//example
}

@media screen and (min-width: 601px) {
//example
}
</style>

Sorry for my bad english

Answer 1

One file

Answer 2

Always let the setting defined in css file, not in html file.

Answer 3

Gordon does that not make loading longer as it loads more lines of code / breakpoints even though they are not needed?

Answer 4

Calviղ yes, I'll try it