¿Qué es CSS, para qué sirve?
CSS son las siglas de “Cascading Style Sheets” (Hojas de estilo en cascada).
CSS es un lenguaje que se utiliza para controlar el aspecto o presentación de los documentos definidos con HTML, es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas Web complejas.
Las CSS permiten solucionar en gran medida los problemas que da el HTML a la hora de maquetar correctamente o al intentar obtener un determinado formato para nuestras páginas.
Si no has visto el tercer video/artículo de la serie, visítalo en este enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Sistemas de estructura CSS – Flex y Grid
La separación de los contenidos de las páginas de su estilo o formato con CSS presenta varias ventajas:
- Mejora la accesibilidad del documento
- Reduce la complejidad de su mantenimiento
- Permite visualizar el mismo contenido en diferentes dispositivos.
- Mayor control sobre el estilo de los elementos de nuestra página web y mayor número de efectos visuales.
¿Por qué es importante optimizar CSS?
Al utilizar hojas de estilos, el servidor tiene que acceder a ellas cada vez que se visita la página web. Por eso, si la css es muy extensa y compleja implicará un tiempo de carga mayor, lo que repercute en que el usuario tardará más en ver el contenido.
Si además tenemos en cuenta el aumento en el uso de dispositivos móviles para acceder a contenidos web, tenemos que aprender a optimizar las css para rebajar el tiempo de carga y espera lo máximo posible.
¿Cómo optimizar CSS ?
Estos son algunos consejos que pueden ayudarte a comprimir tu CSS y acelerar la velocidad de carga de tu web:
1. Utiliza hoja de estilos
De esta forma podrás utilizar las reglas de estilo para todas las páginas del sitio.
<head>
…
<link rel=”stylesheet” type=”text/css” href=”/css/general.css”>
…
</head>
2. Utiliza CSS en la página concreta sólo si es necesario y es poco código
Puedes usar esta técnica para cargar el CSS específico de una página junto con el CSS global del sitio.
<head>
…
<link rel=”stylesheet” type=”text/css” href=”/css/general.css”>
<style>
ul.menu li a{
background:#0AF;
}
</style>
…
</head>
Conoce todas las propiedades que te ofrecen estos sistemas con nuestro Máster en Programación Web
3. Evita utilizar estilos en línea
Si utilizas el atributo style en cada elemento de la página para darle estilo, estarás mezclando el estilo con el contenido y duplicando los estilos a lo largo de varias páginas y elementos.
Si es un caso en el que sabes que el estilo no se va a repetir, puedes hacer una excepción a esta regla. Aunque es más limpio crear el estilo en el <head> dentro de una etiqueta <style>.
4. No uses @import
La regla import de CSS importa archivos CSS desde dentro de otros. La ruta de llamada es más compleja y esto ralentizará la carga.
5. Usa media=”print” para los estilos de impresión
En la hoja de estilo puedes establecer cómo se imprimirá la web utilizando un media query. Pero sacarlo a una hoja de estilo independiente rebaja el peso de la css global al utilizar otros medios de salida, de esta manera:
<head>
…
<link rel=”stylesheet” type=”text/css” href=”/css/general.css”>
<link rel=”stylesheet” type=”text/css” href=”/css/print.css” media=”print”>
…
</head>
6. Organiza bien el CSS para evitar hacer más reglas de las necesarias
Si estructuras bien el código repetirás menos y eso, además de facilitar el mantenimiento de la css, también mejorará el rendimiento de la misma.
7. Cuidado con el selector universal “*”
Debes utilizarlo únicamente cuando sea necesario. Usarlo implica una selección de cada elemento, por lo que el navegador debe recuperar la totalidad de los elementos que lo componen.
8. Aprovecha la herencia y los estilos en cascada para crear menos reglas
Por ejemplo, puedes crear la siguiente regla:
body{
font-family:sans-serif;
}
De esta forma, estas estableciendo el tipo de fuente para todo el documento, sin que sea necesario especificar el tipo de fuente para cada elemento de forma individual.
9. Agrupa las reglas
Si tienes que dar el mismo estilo con varios selectores distintos, agrupa los selectores separándolos por comas.
En lugar de escribir:
.clase1{
color:#ccc;
}
.clase2{
color: #ccc;
}
.clase3{
color: #ccc;
}
Esto se puede escribir de forma más abreviada con:
.clase1,.clase2,.clase3{
color: #ccc;
}
Conoce todas las propiedades que te ofrecen estos sistemas con nuestro Máster en Programación Web
10. Usa las declaraciones abreviadas
Puedes abreviar propiedades, por ejemplo, en lugar de esto:
margin-top: 1em;
margin -right: 1em;
margin -bottom: 1em;
margin -left: 1em;
Utiliza la declaración abreviada:
margin: 1em;
De esta manera escribes menos y el CSS tendrá menos código que descargar.
11. Si utilizas el selector “id” cíñete a él sin complicarlo
Por ejemplo:
section .item #unico{
background:red;
}
Con este HTML:
<section>
<div class=”item”>
<div id=”unico”>
</div>
</div>
</section>
Este selector no tiene mucho sentido porque en realidad sólo puede existir un «id=”unico”» en la página, así que el siguiente selector funcionará exactamente igual y tiene menos código, por lo que tarda menos en cargar y ejecutarse:
#unico {
background:red;
}
12. Utiliza CSS mejor que imágenes para los elementos decorativos
Por lo general siempre va a ser más rápido pintar algo con CSS que utilizar una imagen equivalente. No debes utilizar una imagen como sombra de un texto ya que puedes aplicarla con CSS. O, como en el caso de la index del video de la entrega anterior, es mejor dibujar un rombo con css que insertar una imagen.
13. Maqueta con grid y flex
En el artículo anterior de la serie ya expliqué las ventajas de utilizar estos sistemas, su fácil adaptación al responsive simplifica y reduce el código css.
14. Utiliza códigos de color más cortos
Tenemos varias formas de declarar un valor para los colores en CSS: RGB, HEX o el nombre del color. Lo ideal aquí sería que uses el que ocupe menos bytes.
.box {
background-color: #ffffff; /* blanco */
color: rgb(0,0,0); /* negro */
border-color: #ff0000; /* rojo */
}
Códigos de color abreviados:
.box {
background-color: #fff; /* blanco */
color: #000; /* negro */
border-color: red; /* rojo */
}
Conoce todas las propiedades que te ofrecen estos sistemas con nuestro Máster en Programación Web
15. Optimiza el uso de fuentes
No cargues más fuentes de las necesarias. Si necesitas la fuente bold no cargues también la regular.
También puedes precargarlas desde el HTML así:
<link rel=”preload” href=”fonts/cicle_fina-webfont.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>
16. Las animaciones con CSS mejor que con JavaScript
Hacer la animación con JavaScript sería mucho menos eficiente porque se ejecutaría junto a muchas otras cosas y el navegador está optimizado para ejecutar las animaciones de CSS de forma fluida, priorizando la velocidad sobre la suavidad.
17. Reduce el código CSS
Elimina espacios innecesarios, líneas en blanco y comentarios. Evita también dejar espacios después de los dos puntos o el punto y coma, o eliminar el punto y la coma al final de una lista de reglas. Aunque el archivo CSS pierde su estructura y claridad, de esta forma será interpretado por el navegador más rápido. Puedes hacerte una copia de la css donde mantengas espacios y comentarios para poder editarla más fácil y comprimir la otra copia.
Herramientas para comprimir CSS online y offline
Existen varias herramientas de aplicación online, así como programas offline que se encargan de comprimir los archivos CSS. La mayoría son instrumentos que ahorran el trabajo tedioso y eliminan eficazmente espacios adicionales, sangrías, comentarios y saltos de línea. Estas también permiten abreviar el código de color. Una vez finalizado el proceso, el código puede ser descargado directamente como un archivo CSS, o puede copiarse y pegarse directamente.
Próximos artículos/videos
Video/artículo 5
- En este video plantearé otra estructura grid para la página Nosotros.
- Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: El contenido por delante del diseño. (5/8)
Video/artículo 6
- En la página Contacto nuevamente desarrollaré una estructura grid.
- Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Formularios web. (6/8)
Video/artículo 7
- En este video me centraré en añadir efectos CSS3 de transición y animación.
Video/artículo 8
- En el último video generaré el media query para la adaptación al dispositivo móvil.