Sass, media, breakpoints. Нормально, что буде много media розкидано по файлу?

Question

[Вадим Гук]

Хочу оптимизировать адаптацию сайта.
Сейчас мой файл адаптации .scss выглядит так:

@media (max-width: 1200px) {
	.menu {

		.logo {

		}
	}

	.content {

	}
}

@media (max-width: 992px) {
	.menu {

		.logo {
			
		}
	}

	.content {
		
	}
}

...

Не устраивает то, что бывает долго ищу нужный класс, если проект разрастается.

Нашел такой способ на официальном сайте
sass-scss.ru/documentation/pravila_i_direktivi/dir...

.sidebar {
width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

Но это сделает много медиа запросов по всему файле.

Вопрос:
Не будет ли это влиять на качество кода в плане производительности?

.selector {
  color: red; }
  @media (min-width: 767px) {
    .selector {
      color: blue; } }

.selector2 {
  color: red; }
  @media (min-width: 767px) {
    .selector2 {
      color: blue; } }

Answer 1

[Ivan Stroykin]

Если проект большой (больше чем просто 5 страничник) то во всем нужно строить правильную структура. Без неё в дальнейшем будет большой хаус, когда нужно будет что-то изменить, а зависимости валяются по всему проекту. И это касается как языков программирования, так и, конечно же, таблицы стилей.
Сразу скажу, что последний вариант, когда идет класс, и в нем же прописаны media, которые необходимы только этому классу это очень хороший вариант. Так как в случае чего не нужно бегать по всему коду (а если вы пишите на sass, то файлов будет много. по файлу на каждый компонент). А так все рядом, все видно, сразу понятно что к чему и легко вносить изменения.
На скорость никак не повлияет. Браузер в любом случае обработает все css которые вы ему скормите. А вот на последующую скорость разработки повлияет довольно таки сильно.

Answer 2

[Дмитрий Королёв]

Это абсолютно нормально. Но если смущает, в post-css есть плагин, объединяющий однотипные media queries: https://github.com/hail2u/node-css-mqpacker