Media queries y hojas de estilos.

[limakid]

Algunos prefieren una sola hoja de estilos para todo el sitio (o máximo dos). Por ahora, estoy diseñando con 4 hojas de estilos diferentes para un mismo sitio, pero sólo por ahora ya que al final quisiera juntarlas todas en una sola hoja para subir al servidor remoto.

Asumo que todo el sitio debe ser responsable y todas las páginas deben adaptarse a cada dispositivo. Sólo 3 por ahora: móvil, tablet y escritorio.

¿Cómo hago con lo media queries?
Para asegurarme de que todos los estilos se apliquen a todas las páginas, ¿debería definir (copiar) los mismos media queries en cada una de las 4 hojas de estilos?

Tengo una hoja llamada "texto.css" que se usará precisamente para dar estilo a los textos (párrafos, títulos, etc.). Ahí uso diferentes colores, tamaños, fuentes, etc... estilos... valga la redundancia.

Todas las páginas tendrán su link a la hoja de estilos "texto.css", pero si en esta hoja (texto.css) no hay un media query definido (declarado) para móviles, entonces ¿cómo se verían el texto en un móvil? ¿se vería con su formato por defecto de html? ¿color negro, Times New Roman...? ¿o se van a ver los estilos del GLOBAL o de la hoja CSS en donde se haya definido el media query para móviles?

Necesito organizar esto al menos por ahora, para poder ubicar más rápido mis estilos y hacer las pruebas correctamente en el servidor local (uso MAMP), ya que, como repito, al final quisiera poner todos los estilos en una sola gran hoja.

Espero orientaciones. Gracias.

[NueveReinas]

Una sola llamada a las media-queries (por ejemplo, en "MQ.css") ya es válida para toda la página, aunque una clase esté en otro CSS (por ejemplo, "tablet.css"), porque al renderizar trabaja sobre el HTML.

Por otra parte, podrías unir todo el código del CSS y utilizar un minificador. Entonces subes el "estilo.min.css" y listo.

¿cómo se verían el texto en un móvil? ¿se vería con su formato por defecto de html? ¿color negro, Times New Roman...? ¿o se van a ver los estilos del GLOBAL o de la hoja CSS en donde se haya definido el media query para móviles?

Si no defines MQs, entonces va a tomar el estilo de la clase general/global cuando la pantalla sea menor a X px.

[pzin]

Generalmente las estilos se aplican por orden; la última regla es la que se aplica. Con excepciones como la especificidad CSS o la alteración con el (mal) uso de !important.

Si quieres trabajar cómodamente, échale un vistazo SASS. Aparte de la sintaxis y demás cosas, tiene algo muy bueno que te permite tener un orden con disciplina militar, tanto en cuento puedes tener todo tu estilo separado en cuatro, veinte o cuarenta archivos (yo generalmente ando por ahí) pero se se acabe compilando (en el orden que quieras/necesites) en un único archivo. O dos, o cinco o los que quieras.

La ventaja de esto es que para trabajar es magnífico, ya que trabajas con archivos generalmente pequeños (rara vez paso de 300 o 400 lineas) y encuentras todo muy rápido.