¿Cuando usamos media queries, es una buena practica incluir todos los estilos en un solo selector tal cual lo vemos en la clase? Comúnmen...

Totalmente @groelffi13, son maneras de trabajar :)

Pero como desconozco la experiencia de @angellodonato, quise exponerle las opciones que tenía aunque sea saliendo de lo que es puramente CSS, para que no se límite a pensar solo de una manera.

Peso eso es lo bueno que debatamos y aprendamos unos de otros ;)

Ah no @PabloRocha, si hablamos de preprocesadores tenes toda la razón, SASS que en este caso es el que yo uso si ayuda mucho con ese tema de no repetir las media queries. Pero en este caso la respuesta que le dí a @angellodonato fue mas desde el CSS neto que fue lo que vimos en este caso y no desde los preprocesadores que quizás no sepa (pero que sabrá en su momento :D).

Si trabajas solo con CSS que es lo normal para los que empezamos, anidas las media queries si es lo mejor al final del archivo que es donde normalmente se agregan por orden, el agregar un nuevo archivo es opcional.

Por ejemplo si analizas la página de la w3schools.com ellos lo anidan en varios bloques pequeños o grandes. Pero en Platzi lo hacen como tu dices >.<.

Al final son maneras de trabajar :D

No estoy de acuerdo con @groelffi13, existen herramientas que nos permiten unificar media queries que son iguales para no tener repetido como mencionas el

@media only screen and (max-width: 600px) { }

Aún si no existiera esta herramienta que los unifique, dudo que compense la poca perdida de rendimiento que puedas tener por 20-40 lineas de código CSS más, en comparación con la legibilidad y facilidad de encontrar un componente en un archivo con su media queries que buscarlo en una única hoja de estilos.

Os recomiendo que os veáis el apartado de preprocesadores de este curso o mejor el Curso de preprocesadores y luego el curso del preprocesador que más os guste para especializaros mas.

Curso de Less Curso de SASS Curso de Stylus

De esta manera (si elegimos por ejemplo SASS) tienes, por ejemplo, un documento form.scss donde estaría todo el diseño de tu formulario con sus media queries correspondientes, luego otro buttons.scss para los estilos de los botones y luego en un archivo style.scss tienes un código parecido a esto:

// style.scss
@import 'form', 'buttons';

Al final al compilar tendrás un único archivo style.css que será el de producción, y estarán todos los *.scss uno debajo de otro, por lo que si además usas la metodología que te mencione ITCSS, mejorarás la escalabilidad y la especificidad del proyecto.

Como digo hay muchas formas de hacer todo esto, pero precisamente el tener solo 1 media query por tamaño en vez de

media queries por cada componente que tengas, no creo que sea una ventaja, mientras más desacoplamiento suele ir todo mejor :)

Al generar media queries por cada elementos separado estarías generando aun mas CSS imagina 20 elementos y cada uno con su

Es mejor usar solo uno y anidarlos todos en el. Para el tema de legibilidad y orden puedes crear siempre los media queries al final de tu hoja de estilos o en una hoja aparte que también he visto que los trabajan así

Desde mi punto de vista eso sería una mala práctica. Yo trabajo principalmente basándome en la metodología ITCSS que trabaja con otras metodologías como son BEM, SMACSS u OOCSS, por lo que se separa cada componente para ofrecer mayor escalabilidad entre otras ventajas.

Por lo tanto lo ideal es que cada componente tenga su media queries individual, así mantienes la legibilidad y comodidad a la hora de trabajar.

Un saludo!