I've been using CSS for several years, and I've always grouped my media queries at the bottom of any file they were in. For me, this prevented having to write multiple media queries for the same screen size (or range, as the case may be).

Grouped Media Queries Example

/* general styles */
.selector-1 {
  padding: 10px;
}

.selector-2 {
  font-size: 18px;
}

/* responsive styles */
@media (max-width: 767px) {
  .selector-1 {
    padding: 5px;
  }
}

@media (max-width: 479px) {
  .selector-2 {
    font-size: 14px;
  }
}

I was also under the impression that adding more media queries would reduce performance (outside of having to load a larger CSS file).

Lately though, I've been seeing individual media queries grouped with related selectors.

Grouped By Selectors Example

/* .selector-1 styles */
.selector-1 {
  padding: 10px;
}
@media (max-width: 767px) {
  .selector-1 {
    padding: 5px;
  }
}

/* .selector-2 styles */
.selector-2 {
  font-size: 18px;
}
@media (max-width: 479px) {
  .selector-2 {
    font-size: 14px;
  }
}

I do see the immediately obvious benefits to this, but I figured I'd ask for opinions on either or both, and whether there really is a performance impact as the number of media queries increases.

I should also mention that I tend to work on projects that involve a lot of CSS; I work mostly on WordPress websites with a lot of pre-existing CSS to work around. Just throwing that out there for some context.

To avoid any confusion, I'm referring to vanilla CSS specifically, not a pre-processor like Sass or LESS.