¿Dónde colocar keyframes y media-queries en CSS?

Antes ponía keyframes, media-queries y equivalentes al final de la hoja de estilos css, así me lo enseñaron pero con el tiempo he pensado que para tener mejor control del código puedo en algunos casos poner estas clases especiales en donde quiero y no necesariamente al final.

No me parece notar nada diferente en la funcionalidad pero quiero algunas ideas de puristas si eso está bien o mal o qué...

En términos generales, no hay nada de malo en poner keyframes, media-queries y equivalentes en cualquier lugar de tu hoja de estilos CSS. La ubicación de estas clases especiales no afecta su funcionalidad.

Sin embargo, es una buena práctica mantener tu código organizado y fácil de entender. En este sentido, muchos desarrolladores prefieren agrupar todas las clases especiales al final de su archivo CSS para tener una mejor visibilidad y eficiencia en el mantenimiento.

Otra opción es utilizar preprocesadores de CSS como Sass o Less, que permiten definir variables, mixins, funciones y clases especiales en archivos separados y luego compilar todo en un solo archivo CSS. Este enfoque puede ayudar a mantener tu código organizado y modularizado.

En última instancia, la elección de dónde colocar estas clases especiales en tu código es tuya, siempre y cuando seas consistente y mantengas tu código legible y fácil de mantener.

Pues en lo que carga casi no se nota.

Si quieres todo ordenado lo pones en el .css o dentro de <style>...</style>

Y si tienes muchos codigos/modificaciones lo pones cercas del <div> para no confundirte o ahorrarte tiempo en buscar
<div>...</div>
<style>...</style>

Pues me parece bien no tener que ponerlo todo al final per se ya que a veces hace falta contexto. Se me crecen muchos css que luego ya no los puedo ni analizar...