Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS.
1. Selectores ID, Classes, Tags
#logo { margin-top: 1em; }
.ico { margin-left: 1em; }
a { text-decoration:none; }
Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. En este punto tenemos que pensar de forma creativa y global para usar los selectores de clase, las propias etiquetas y los principios de la cascada.
2. Un identificador no necesita más
h1 #logo { margin: 1em; }
Las etiquetas con un atributo de identificador son irrepetibles, solamente hay uno por página, por tanto es redundante añadir cualquier referencia adicional.
El ejemplo anterior más optimo sería:
#logo { margin: 1em; }
3. Agrupar selectores con mismas propiedades
En vez de:
h2 { font-weight: 700; }
h3 { font-weight: 700; }
.bold { font-weight: 700; }
Mejor usar:
h2, h3, .bold { font-weight: 700; }
Este es un ejemplo muy obvio pero puede ser más complejo dependiendo del tamaño de la hoja de estilos.
4. Escribir el CSS de formas abreviada
Las llamadas Shorthand es una forma de escribir las reglas de forma abreviada, lo cual repercute directamente en la optimización (siguiendo el principio menos es más
).
Este asunto lo he tratado en un post anterior llamado «Formas abreviadas para optimizar CSS».
5. Más restrictivo a la derecha
ul li span.linklist a { border: 1px solid red; }
Ante un ejemplo como este podemos pensar que el navegador interpreta de izquierda a derecha los selectores, cuando en realidad es justamente a la inversa. Primero analiza A, luego mira que se su padre sea SPAN.linklist, su abuelo LI y su bisabuelo UL, si esto se cumple se pone la propiedad de estilo border: 1px solid red;.
El problema es que pueden existir muchas etiquetas de enlace en una página y la cantidad de proceso será mayor, por lo tanto tendríamos que poner el selector más restrictivo más a la derecha. Ante esto se me ocurren dos soluciones:
- Disminuir las descendencias, por ejemplo:
span.linklist a - Otorgar una clase
a.linklisty prescindir del resto
6. Menos descendencia y más herencia
Es aconsejable no recurrir a selectores con descendencias, hijos, hermanos, etc. Siempre que sea posible usar únicamente Selectores ID, clases y etiquetas.
En cambio si es positivo heredar (inherit) el mayor número de propiedades posibles entre diferentes elementos. Tengamos en cuenta también la herencia por defecto para no escribir reglas redundantes.
7. Poner el CSS en HEAD
El situar los estilos en el HEAD hace posible que la página muestre el contenido-estilo de forma progresiva, lo que mejora la experiencia de uso.
Por otro lado la especificación HTML también recomienda la etiqueta LINK dentro del HEAD para incorporar nuestras hojas de estilo.
8. CSS como fichero externo (style.css)
Esto hace que la cache pueda hacer su trabajo, de lo contrario si incorporamos el CSS en linea, será descargado una y otra vez con la página.
Otra ventaja es la mejora en la escalabilidad pudiendo gestionar todos los estilos y el diseño de una forma más centralizada.
9. LINK mejor que @import
En algunas versiones de IE usar @import es parecido a usar LINK fuera de HEAD, por esta razón y teniendo en cuanta lo dicho anteriormente, es recomendable usar un enlace al fichero y no importarlo.
Más información en Don’t use @import.
10. Minimizar el número de peticiones LINK
Supongamos el siguiente ejemplo:
<link rel="stylesheet" href="style1.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
En el fichero style2.css a penas hay unas pocas lineas de código y su gestión no lleva a confusiones, entonces es mejor tener un solo fichero style.css con todas las reflas CSS, reduciendo el número de peticiones LINK al servidor.
En este sentido tener en cuanta también la modularidad, pueden existir ficheros CSS que por esta razón es mejor mantenerlos bien separados y organizados.
11. Evitar las «CSS Expressions»
No son estándares y se procesan repetidas veces para establecer sus propiedades dinámicas.
En No me gustan las CSS Expressions planteo algunos problemas que derivan en la falta de optimización.
12. Evitar filtros
Siempre que sea posible evitar el uso de filtros como por ejemplo «AlphaImageLoader«, estos filtros consumen una gran cantidad de memoria para su funcionamiento.
Herramientas para la optimización y compresión
Existen muchas, pero las que más uso son:
- CleanCSS – Limpiar y optimizar nuestras hojas de estilo
- Firebug + PageSpeed + YSlow
- YUI Compressor
Las dos primeras te ayudarán a chequear y encontrar mejores formas de optimización, la tercera se encarga de comprimir el fichero CSS.
La experiencia hace que en cada proyecto tengamos menos trabajo que optimizar e invertir menos tiempo delante de estas herramientas.
Por cierto, ¿se os ocurren más formas para optimizar CSS?