Estoy actualizando un sitio web para agregar algunas páginas amigables para dispositivos móviles.¿Debo usar más de una hoja de CSS?
Por el momento tenemos una gran página css con todo adentro. Mi idea es poner todo el CSS móvil específico en un archivo separado y luego vincular ambas hojas. El css móvil superará cualquier cosa en el css predeterminado (botones más grandes, etc.).
Soy bastante nuevo en css, ¿cuál es la mejor práctica?
sí, debería usar más de un archivo css en lugar de usar un archivo grande. Te ayuda mientras mantienes tu sitio, también usas diferentes definiciones (classe o nombres de identificación) en diferentes CSS, de lo contrario tomará el que se declaró más tarde. Por ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
En el caso de los estilos para clientes específicos, diría que es una buena práctica para separarlos.
Yo usaría dos también. Mantiene las cosas más ordenadas al editar para cada dispositivo (computadora y dispositivo móvil). Tengo una enorme hoja de estilo CSS que uso para todos los navegadores con la ayuda del script selector de navegador css, y odio tener que desplazarme a través de más de 6000 líneas de CSS, así que diría que la mejor manera, al menos desde la experiencia, es separar ¡ellos afuera!
Un gran archivo CSS genera menos solicitudes HTTP, lo que puede mejorar el rendimiento.
Varios archivos más pequeños conducen a una organización más fácil que hará que el desarrollo y el mantenimiento sean más económicos y fáciles.
Excelente respuesta, dijo concisamente. – Armstrongest
Tengo algunas hojas de estilo para cualquier aplicación importante en la que haya trabajado.
media. <link rel="stylesheet" type="text/css" media="print" href="print.css" />Si estuviera intentando obtener un rendimiento increíblemente rápido, los combinaría. Sin embargo, sé que los sitios que obtienen cientos de millones de visitas al día no se molestan, por lo que recomiendo encarecidamente dividirlos, pero tiene sentido para usted, a fin de que sea más fácil de mantener.
En su mayor parte, el hardware adicional es más económico que las horas extra de desarrollador y/o más errores. La capacidad de mantenimiento suele ser el objetivo más alto para mí.
Agrupe su CSS de manera significativa y sírvalo con cuidado.
Por ejemplo, si tiene CSS aplicado a través de su sitio (por ejemplo, restablecimiento de CSS) hágalo archivo separado e inclúyalo para cada página.
Luego, para cada componente lógico de su sitio, cree un archivo CSS por separado y publíquelo en páginas que pertenezcan al componente lógico respectivo. (Supongamos que tiene un blog y encuestas en su sitio, si el blog nunca necesita CSS para las encuestas, no necesita incluirlo en el blog). Sin embargo, esto no es práctico para sitios pequeños.
Agrupe su CSS por los medios para los que se utilizan. Si tiene una hoja de estilo para imprimir, guárdela separada de sus hojas básicas si tiene sentido (no use archivos separados si solo tiene una propiedad de CSS única para imprimir, ya que no vale la pena el tiempo de solicitud).
Tenga en cuenta que más hojas asumen más solicitudes HTTP y cada solicitud cuesta una cierta cantidad de tiempo.
así que no hay manera explícita estas cosas debe ser manejado, es todo acerca de hacer su CSS más fácil de mantener y fácil para el cliente para descargar (menos peticiones HTTP, menor tamaño, etc.)
Uso de hojas de estilo independientes para diferentes medios se hacen fácilmente.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
En este caso, todo el estilo se descargará y aplicará cuando el tipo de medio coincida con el dispositivo.
Sin embargo, hay otro método que es bueno si su aplicación está diseñada para móviles, ya que descarga la hoja de estilos SOLAMENTE si el tipo de medio coincide.
<style type="text/css" media="screen">
@import "screen.css"; /* Note that some (older?) browsers don't support @import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
@import "mobile.css";
</style>
<style type="text/css" media="print">
@import "print.css";
</style>
Creo que importar más de un css en una etiqueta de
¿utilizarías entonces diferentes valores 'media'? – xtofl
Si hay dos definiciones para el mismo selector en stylesheet.css y another_css.css, ¿cuál se seleccionaría? – Robert
@Robert Si los selectores son idénticos, la hoja de estilo que se declara posteriormente en la fuente tendrá prioridad. En este caso, eso sería another_css.css. – AaronSieb