El desarrollo de sitios web de front-end a menudo se representa como un taburete de tres patas compuesto por:
- HTML para la estructura de un sitio
- CSS para los estilos visuales
- Javascript para comportamientos
La segunda pata de este taburete, Hojas de estilo en cascada, admite tres estilos diferentes que puede agregar a un documento.
- Estilos en línea
- Estilos incrustados
- Estilos externos
Cada uno de estos estilos CSS presenta ventajas e inconvenientes únicos.
Estilos en línea
Los estilos en línea son estilos que se escriben directamente en la etiqueta del documento HTML. Los estilos en línea afectan solo a la etiqueta específica a la que se aplican:
Esta regla CSS desactiva la decoración de texto subrayado estándar para este enlace. Sin embargo, no cambiaría ningún otro enlace de la página. Ésta es una de las limitaciones de los estilos en línea. Dado que solo cambian en un elemento específico, necesitaría ensuciar su HTML con estos estilos para lograr un diseño de página unificado. Esa no es una buena práctica: de hecho, está a un paso de los días de
fuente etiquetas y la mezcla de estructura y estilo en las páginas web.Los estilos en línea también requieren una especificidad muy alta. Esto hace que sea difícil sobrescribirlos con otros estilos que no están en línea. Por ejemplo, si desea que un sitio sea receptivo y cambiar la forma en que un elemento se ve en ciertos puntos de interrupción usando preguntas de los medios, los estilos en línea en un elemento hacen que esto sea difícil de hacer.
Los estilos en línea solo son apropiados cuando los usa con moderación, en el enfoque de "excepción a la regla" que diferencia uno o dos elementos de sus pares en la página.
Estilos incrustados
Los estilos incrustados residen en el encabezado del documento. Están encerrados en etiquetas y se parecen mucho a archivos CSS externos dentro de esa parte del documento.
Los estilos incrustados afectan solo a las etiquetas de la página en la que están incrustados. Una vez más, este enfoque niega uno de los puntos fuertes de CSS. Dado que cada página presenta estilos definidos en el encabezado, si desea realizar un cambio en todo el sitio, como cambiar el color de enlaces de rojo a verde; deberá realizar este cambio en cada página, ya que cada página utiliza un estilo incrustado sábana. Este enfoque es mejor que los estilos en línea, pero sigue siendo problemático en muchos casos.
Las hojas de estilo que se agregan al encabezado de un documento también agregan una cantidad significativa de código de marcado a esa página, lo que también puede hacer que la página sea más difícil de administrar en el futuro.
El beneficio de las hojas de estilo incrustadas es que se cargan inmediatamente con la propia página, en lugar de requerir que se carguen otros archivos externos. Esta técnica puede ser una ventaja desde la perspectiva de la velocidad de descarga y el rendimiento.
Hojas de estilo externas
Hoy en día, la mayoría de los sitios web utilizan hojas de estilo externas. Los estilos externos son estilos que se escriben en un documento separado y luego se adjuntan a varios documentos web. Se les llama al documento principal mediante un etiqueta en el encabezado del documento. Las hojas de estilo externas pueden residir en el mismo servidor que el HTML o pueden extraerse de otro servidor por completo. Este suele ser el caso de los activos, como las fuentes, que muchos sitios toman prestados de Google.
Hojas de estilo externas afectar a cualquier documento al que están adjuntos, lo que significa que si tiene un sitio web de 20 páginas donde cada página utiliza la misma hoja de estilo (así es como se hace normalmente), puede realizar un cambio visual en cada una de esas páginas simplemente editando ese estilo sábana. Esta economía facilita mucho la gestión del sitio a largo plazo.
La mayoría de los diseñadores web profesionales utilizan un archivo CSS principal para controlar el diseño y la distribución de un sitio.
La desventaja de las hojas de estilo externas es que requieren páginas para buscar y cargar estos archivos externos. No todas las páginas utilizarán todos los estilos de la hoja CSS, por lo que muchas páginas cargarán una página CSS mucho más grande de la que realmente se necesita.
Si bien es cierto que hay un impacto en el rendimiento de los archivos CSS externos, ciertamente se puede minimizar. Siendo realistas, los archivos CSS son solo archivos de texto, por lo que no son grandes para empezar. Si todo su sitio utiliza un solo archivo CSS, también obtiene el beneficio de que ese documento se almacene en caché después de que se cargue inicialmente, lo que significa que podría haber un ligero impacto en el rendimiento en la primera página para algunas visitas, pero las páginas siguientes usarán el archivo CSS almacenado en caché, por lo que cualquier impacto sería negado.