Расставляем Sass точки остановки правильно

Я люблю оставлять @media аннотации в точках остановки запроса. Пожалуй, для меня это самая важная особенность Sass. Я выбираю метод и пишу код:

.element {
 display: grid;
 grid-template-columns: 100px 1fr;
 @include breakpoint(baby-bear) {
   display: block;
 }
}

Это достаточно просто. Но что, если у моего элемента есть несколько подэлементов и точка останова также повлияет и на них? Есть разные подходы и я никогда не был уверен в том, какой именно выбрать. 

Одним из вариантов было дублирование точки остановы для каждого потомка:

.parent {   @include breakpoint(desktop) {
   }   .child {
       @include breakpoint(desktop) {
       }
   }  .child-2 {
       @include breakpoint(desktop) {
       }
   }}

Скомпилированный CSS выглядит примерно так:

@media screen and (min-width: 700px) {
 .parent {
 }
}
@media screen and (min-width: 700px) {
 .parent .child {
 }
}
@media screen and (min-width: 700px) {
 .parent .child-2 {
 }
}

Так же, я, например, мог бы дублировать дочерние элементы под первой вложенной точкой остановки:

.parent {   
@include breakpoint(desktop) {   
   .child {
      }     
 .child-2 {
      }   
}   .child {
   }  
.child-2 {
   }
}

Теперь мы сможем увидеть результат: 

@media screen and (min-width: 700px) {
 .parent .child {
 }
 .parent .child-2 {
 }
}
.parent .child {
}
.parent .child-2 {
}

Либо же можно сделать комбинацию из двух вариантов. Обычно практика дублирования считается антипаттерном, но я не уверен, что здесь есть идеальное решение. Я чуть больше ошибаюсь при дублировании медиазапроса, чем здесь. Но медиазапросы менее подвержены ошибкам, чем дублирующие селекторы.

Перевод статьи: Where Do You Nest Your Sass Breakpoints?