Wo verschachtelst du deine Sass Breakpoints?

Ich liebe es, meine @media query Breakpoints zu verschachteln. Das ist für mich vielleicht das wichtigste Feature von Sass. Vielleicht wähle ich eine Methode und mache es so

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

Das ist ganz einfach. Aber was ist, wenn mein Element mehrere Unterelemente hat und der Breakpoint diese ebenfalls betrifft? Es gibt verschiedene Ansätze, und ich bin mir nie ganz sicher, welchen ich verfolgen sollte.

Ich könnte den Breakpoint für jedes Kind duplizieren

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

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

}

Der kompilierte CSS-Code sieht dann etwa so aus

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

Oder ich könnte die Kinder unter dem ersten verschachtelten Breakpoint duplizieren

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}

Das führt zu

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

Oder ich könnte eine Kombination aus beidem tun. Keiner von beiden fühlt sich wegen der Duplizierung besonders gut an, aber ich bin mir nicht sicher, ob es hier eine perfekte Antwort gibt. Ich neige eher zum Duplizieren der Media Query, da dies weniger fehleranfällig zu sein scheint als das Duplizieren von Selektoren.