css - w3schools - Uso de puntos de interrupción con bourbon y limpio con los medios() mixin

css mixin w3schools

Question

He configurado 3 puntos de interrupción diferentes con bourbon y limpio. He seguido algo de la información en bitters para configurar de manera variable para usar en la mezcla de medios. Esto hace que sea ridículamente fácil lanzar puntos de interrupción.

@include media($small-screen-up) {
.foo {property; value;}
}

Históricamente, establecí puntos de interrupción y básicamente contenía todos los estilos apropiados dentro de los puntos de interrupción.

@media screen and (min-width: 40em) and (max-width: 53.75em) {
// all my medium screen rulesets here, yay!
  .foo {
    property: value;
   }
}

@media screen and (min-width: 53.76em) and (max-width: 80em) {
// all my large screen rulesets here, yay!
  .foo {
    property: value;
   }
}

Con esta mixin y las variables configuradas para los puntos de ruptura, me encontré acercándome a él de manera diferente.

.foo {
  property: value;

    @include media($medium-screen-up) {
   property: value;
   }

   @include media($large-screen-up) {
   property: value;
   }
}

Para que pueda ver que estoy trabajando dentro de un conjunto de reglas y ajustar los estilos dentro del conjunto de reglas en función del tamaño de la pantalla de destino.

Esto se siente bien, pero también se siente sucio.

Parece correcto porque tengo todas las reglas sin importar el tamaño que contenga en una sola área. Se siente más fácil rastrear mentalmente la herencia y la especificidad.

Si se siente sucio porque agrega una tonelada de reglas de @media en la salida procesada. En realidad, nunca escribiría CSS vainilla de esa manera.

¿Estoy loco? ¿Cómo se acercan los desarrolladores de front-end "profesionales"? (Soy un diseñador de oficio). ¿Cuáles son las mejores prácticas para administrar puntos de interrupción utilizando bourbon, clean y sass en aplicaciones complejas (nivel empresarial)?