Optimiza tu CSS

Después de hacer una profunda investigación sobre como optimizar el CSS, ya me siento preparado para daros un resultado a la hora de codificar en hojas de estilo teniendo en cuenta al desarrollador, a las tecnologías de optimización y búsqueda y sobre todo a la correcta visualización.

Cuando se comienza a desarrollar código CSS, una de las consideraciones que no tenemos en cuenta es la codificación vertical en vez de una codificación horizontal. Obviamente para aquellos futuros desarrolladores que están aprendiendo a estilizar en hojas de estilo es sin duda la forma más cómoda de desarrollar en CSS, sin embargo, esto implica la creación de excesivas líneas de código. Podemos ahorrar y por consecuencia disminuir el peso de nuestras hojas de estilo desarrollando en horizontal, de esta forma facilitaremos la descarga del archivo en aquellas conexiones precarias como la actual 3G.

El desglose del código en diferentes archivos CSS también es una mala práctica. Esta afirmación es algo que sorprende a todo desarrollador experimentado, ya que vivimos en la era de la Programación Orientada a Objetos y una de las reglas es la encapsulación del código. Sin embargo para el mundo del desarrollo web esto produce una disminución de la velocidad de descarga que acaba produciendo que nuestra web sea lenta e incluso puede llegar a ocasionar errores de carga (Cuando hablo de una web lenta, me refiero a más de 2 segundos de carga). Por tanto, deberíamos de tener un máximo de 4 archivos CSS. Yo recomiendo la siguiente estructura:

• Main.css – Aquí codificaremos toda la estructura de la web y sus dependencias. Por tanto aquí encontraremos el código que dimensiona la web y posiciona los elementos entro otros.

• Style.css – Todo lo referente al estilo visual de la web irá en este archivo. Por ejemplo, podemos encontrar código referente a los colores de las cajas y el texto, el estilo propio del texto como las fuentes y bordeados entre otros.
• Misc.css – El código que no tenga cabida en los dos anteriores se incluirá en este fichero. En mi caso tengo la adaptación de la web para smartphones y tablets.
• Reset.css – El famoso código que elimina el código implementado por defecto en los elementos HTML.

Si aun siguiendo estas pautas, no te convence el desarrollo de tu código CSS y aún quieres profundizar más en la optimización, puedes tener en cuenta los siguientes puntos (nota al lector: estos puntos son pequeños trucos para mejorar la velocidad de carga de tus hojas de estilo, cada desarrollador es libre de emplearlo o no dependiendo de su criterio).

• Sprites – Si tu web cuenta con muchísimas imágenes, una de las formas de optimizar la carga de las mismas es usando la técnica del Sprite. Con ello conseguimos que la imagen cargue una única vez y además ahorramos código de invocación de imágenes. Sin duda es la mejor forma de optimizar tu web.
• Utilización de clases – Las clases pueden ser una de las herramientas más útiles del desarrollador. Muchos de nosotros nos cuesta acostumbrarnos a generar un código para x posibilidades y gracias a las clases y nuestras habilidades de desarrollador podemos conseguirlo y optimizar muchísimo el código. Olvidaos de los identificadores y de llamar directamente a las etiquetas de HTML y trabajad las clases.
• Anidación – Recordad que el CSS permite anidar el código y con ello podemos agrupar muchísimos selectores que carguen la misma propiedad. Sin duda merece la pena perder un poco de tiempo para reagrupar el código.
• Comentarios – Reduce los comentarios de tu CSS. Si tus comentarios ocupan 3 o 4 líneas, ¿no has pensado en poner un comentario de 1 línea? Imagina la de líneas que te vas a ahorrar.
• Simplifica los colores – Si por ejemplo tienes que invocar el color blanco y utilizas #FFFFFF, recuerda que puedes reducir este código al siguiente #FFF. De esta forma ganas escribir menos caracteres.
• Remover unidades cuando el valor sea 0 – Si los valores de tus margins o paddings son 0, no pongas 0px, de esta forma ahorras dos caracteres.

Espero que os haya ayudado esta pequeña guía de codificación.

Un saludo

Fuente http://www.antoniomolina.net/new.php?article=20130109optimiza-tu-css.php