Aunque lo más habitual es separar los estilos css en diferentes archivos para cada media (screen, print, handheld…), si éstos no son muy grandes podemos combinarlos todos en uno sólo, ahorrando peticiones al servidor y mejorando el rendimiento.

habitualmente, creamos la hojas de estilos y las enlazamos en nuestro documento asignando el atributo media según corresponda:

Lo que puede suceder es que los archivos sean tan pequeños que se necesite más tiempo para procesar la petición al servidor que en su descarga…

Sin embargo, existe la posibilidad de combnar ambos tipos en un sólo css, gracias a la regla @media. La sintaxis es muy sencilla:

@media tipoDeMedia{
   ... aqui van nuestras reglas...
}

Gracias a ello, podemos utilizar un solo archivo y escribir:

/*estilos.css*/
@media screen{
   #menu{
      float:left;
      width: 120px;
   }
}

@media print{
   #menu{
     display:none;
   }
}

Como siempre, todo depende de las necesidades: Puede ser una buena idea para archivos pequeños, pero puede complicar la edición de hojas de estilos demasiado grandes.