El desarrollo de sitios web frontales a menudo se representa como un taburete de tres patas. Estas patas son las siguientes:
- HTML para la estructura de un sitio;
- CSS para los estilos visuales;
- Javascript para comportamientos.
La segunda pata de este taburete, CSS u hojas de estilo en cascada, es lo que estamos viendo aquí hoy. Específicamente, queremos tratar los 3 tipos de estilos que puede añadir a un documento.
- Estilos en línea
- Estilos incrustados
- Estilos externos
Cada uno de estos tipos de estilos CSS tiene sus ventajas e inconvenientes, así que echemos un vistazo a cada uno de ellos individualmente.
Estilos en línea
Los estilos en línea son estilos que se escriben directamente en la etiqueta en el documento HTML. Los estilos en línea afectan sólo a la etiqueta específica a la que se aplican. Aquí hay un ejemplo de un estilo en línea aplicado a un enlace estándar, o ancla, etiqueta:
Esta regla CSS desactivaría la decoración estándar del texto de subrayado de este enlace. Sin embargo, no cambiará ningún otro enlace de la página. Esta es una de las limitaciones de los estilos en línea. Dado que sólo cambian en un elemento específico, necesitaría llenar su HTML con estos estilos para lograr un diseño de página real. Esa no es una buena práctica. De hecho, está a un paso de los días de las etiquetas "font" y de la mezcla de estructura y estilo en las páginas web.
Los estilos en línea también tienen una especificidad muy alta. Esto hace que sea muy difícil sobrescribirlos con otros estilos no en línea. Por ejemplo, si desea hacer que un sitio responda y cambiar la forma en que un elemento mira ciertos puntos de interrupción utilizando consultas de medios, los estilos en línea en un elemento harán que esto sea muy difícil de hacer.
En última instancia, los estilos en línea son realmente apropiados sólo cuando se usan con moderación. De hecho, rara vez usamos estilos en línea en nuestras páginas web.
Estilos integrados
Los estilos incrustados son estilos que están incrustados en el encabezado del documento. Los estilos incrustados afectan sólo a las etiquetas de la página en la que están incrustados. Una vez más, este enfoque niega una de las fortalezas del FSC. Dado que cada página tendría estilos en el, si desea hacer un cambio en todo el sitio, como cambiar el color de los enlaces de rojo a verde, tendría que hacer este cambio en cada página, ya que cada página utiliza una hoja de estilo incrustada. Esto es mejor que los estilos en línea, pero sigue siendo problemático en muchos casos.
Hojas de estilo que se añaden a
de un documento también agrega 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 manejar en el futuro.
La ventaja de las hojas de estilo incrustadas es que se cargan inmediatamente con la página en sí, en lugar de requerir que se carguen otros archivos externos. Esto puede ser una ventaja desde el punto de vista de la velocidad de descarga y el rendimiento.
Hojas de Estilo Externas
La mayoría de los sitios web de hoy en día 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. Las hojas de estilo externas pueden afectar a cualquier documento al que se adjuntan, lo que significa que si tiene un sitio web de 20 páginas donde cada página utiliza la misma hoja de estilo (normalmente es así como se hace), puede hacer un cambio visual en cada una de esas páginas simplemente editando esa hoja de estilo. Esto hace que la gestión a largo plazo de la obra sea mucho más fácil.
La desventaja de las hojas de estilo externas es que requieren páginas para recuperar y cargar estos archivos externos. No todas las páginas usará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 lo que realmente necesitan.
Si bien es cierto que hay un impacto en el rendimiento de los archivos CSS externos, sin duda se puede minimizar. Siendo realistas, los archivos CSS son sólo archivos de texto, por lo que generalmente no son muy grandes para empezar. Si todo su sitio utiliza 1 archivo CSS, también obtiene el beneficio de que ese documento se almacene en caché después de que se haya cargado inicialmente. Esto significa que podría haber un ligero golpe de rendimiento en la primera página de algunas visitas, pero las páginas siguientes utilizarán el archivo CSS en caché, por lo que cualquier golpe sería negado. Los archivos CSS externos son la forma en que construimos todas nuestras páginas web.
