Best Practice for CSS Media Queries

When implementing CSS media queries, which of these two approaches would be better?

For readability, I think this option is better: have multiple of the same media query under different headings. But I wonder how this affects the loading speed. Here's an example:

/* Header
--------------------------------- */

@media screen and (min-width: 400px) {

  /* Some CSS rules for the header */

}

/* Something else
--------------------------------- */

@media screen and (min-width: 400px) {

  /* Some CSS rules for something else */

}

Notice in the above example that the media query is the same, but organised under different headings to improve readability.

The other option would be to use only one of each media query, and then put the headings under each media query. Personally, I find this harder to scan — but does it improve page loading speed? Which approach is better?