Los sitios web son una combinación de estilo y estructura, y en la web de hoy, es una buena práctica mantener estos dos aspectos de un sitio separados uno del otro.
HTML siempre ha sido lo que proporciona un sitio con su estructura. En los primeros días de la Web, el HTML también contenía información de estilo. Elementos como el la etiqueta estaba llena de código HTML, agregando información de apariencia junto con información estructural. El movimiento de los estándares web nos impulsó a cambiar esta práctica y, en cambio, a insertar toda la información de estilo en CSS o en Cascading Style Sheets. Yendo un paso más allá, las recomendaciones actuales son que use lo que se conoce como una "hoja de estilo externa" para las necesidades de diseño de su sitio web.
Ventajas y desventajas de las hojas de estilo externas
Una de las mejores cosas de las Hojas de estilo en cascada es que puede usarlas para mantener todo el sitio coherente. La forma más sencilla de hacerlo es vincular o importar una hoja de estilo externa. Si usa la misma hoja de estilo externa para cada página de su sitio, puede estar seguro de que todas las páginas tendrán el mismo estilo. También puede hacer que sea más fácil hacer cambios para el futuro. Dado que cada página utiliza la misma hoja de estilo externa, cualquier cambio en esa hoja afectará a cada página del sitio. ¡Esto es mucho mejor que tener que cambiar cada página individualmente!
Ventajas de las hojas de estilo externas
- Puede controlar la apariencia de varios documentos a la vez.
- Esto es especialmente útil si trabaja con un equipo de personas para crear su sitio web. Muchas reglas de estilo pueden ser difíciles de recordar, y si bien puede tener una guía de estilo impresa, es ineficiente y tedioso hojearla continuamente para determinar si el texto de ejemplo debe escribirse en letra Arial de 12 puntos o mensajería de 14 puntos. Al tener todo en un solo lugar, y dado que ese lugar es también donde haría cambios, puede hacer el mantenimiento mucho más fácil.
- Puede crear clases de estilos que luego se pueden usar en muchos elementos HTML diferentes.
- Si a menudo usa un cierto estilo de fuente para enfatizar varias cosas en su página, puede usar un atributo de clase que configuró en su hoja de estilo para obtener este aspecto, en lugar de definir un estilo específico para cada instancia del énfasis.
- Puedes agrupar fácilmente tus estilos para que sean más eficientes.
- Todos los métodos de agrupación que están disponibles para CSS se pueden usar en hojas de estilo externas, y esto le proporciona más control y flexibilidad en sus páginas.
Desventajas de las hojas de estilo externo
- Las hojas de estilo externas pueden aumentar el tiempo de descarga, especialmente si son extremadamente grandes. Dado que el archivo CSS es un documento separado que debe cargarse, afectará el rendimiento para realizar esa descarga.
- Las hojas de estilo externas se vuelven grandes rápidamente ya que es difícil saber cuándo un estilo ya no está en uso porque no se elimina cuando se elimina la página. La administración adecuada de sus archivos CSS es importante, especialmente si varias personas están trabajando en el mismo archivo.
- Si solo tiene un sitio web de una sola página, puede que no sea necesario tener un archivo externo para CSS, ya que solo tiene esa página para diseñar. Muchos de los beneficios de CSS externo se pierden cuando solo tiene un sitio de una sola página.
Cómo crear una hoja de estilo externa
Las hojas de estilo externas se crean con una sintaxis similar a las hojas de estilo de nivel de documento. Sin embargo, todo lo que necesita incluir es el selector y la declaración. Al igual que en una hoja de estilo a nivel de documento, la sintaxis de una regla es:
selector {propiedad: valor;}
Guarde estas reglas en un archivo de texto con la extensión .css. Esto no es necesario, pero es un buen hábito, por lo que puede reconocer inmediatamente sus hojas de estilo en una lista de directorios.
Una vez que tenga un documento de hoja de estilo, debe vincularlo a sus páginas web. Esto se puede hacer de dos formas:
- Enlace
- Para vincular una hoja de estilo, utiliza la etiqueta HTML. Esto tiene los atributos. rel, tipoy href. El atributo rel indica lo que está enlazando (en este caso, una hoja de estilo), el tipo define el tipo MIME para el navegador y href es la ruta al archivo .css.
- Importador
- Debería utilizar una hoja de estilo importada dentro de una hoja de estilo de nivel de documento para poder importar los atributos de una hoja de estilo externa sin perder ningún documento específico. Lo llama de manera similar a llamar a una hoja de estilo vinculada, solo que debe llamarse dentro de una declaración de estilo de nivel de documento. Puede importar tantas hojas de estilo externas como necesite para mantener su sitio web.
Artículo original de Jennifer Krynin. Editado por Jeremy Girard el 8/8/17
